垂直居中解决方法

时间：2016-09-02 13:08:36 阅读：128 评论：0 收藏：0 [点我收藏+]

标签：

使用flex解决垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding:0;
            margin: 0;
            box-sizing: border-box;
        }
        /*使用absolute和translate，垂直居中*/
        /*body {*/
            /*padding:1em calc(50% - 450px);*/
            /*background-color: mistyrose;*/
        /*}*/
        /*main {
            position: absolute;
            top:50%;
            left: 50%;
            !*根据自身的width，height进行百分比偏移*!
            transform: translate(-50% , -50%);
            width:40%;
            padding: 1em;
            background-color: grey;
        }*/
        /*main {*/
            /*margin: 50vh auto 0;*/
            /*padding: 1em 1.5em;*/
            /*width: 28em;*/
            /*background-color: grey;*/
            /*transform: translateY(-50%);*/
        /*}*/
        /*更好的方法，使用flex*/
        body {
            display: flex;
            height: 100vh;

            background-color: antiquewhite;
        }
        main {
            margin: auto;

            display: flex;
            align-items: center;
            justify-content: center;
            flex-flow: column;
            width: 28em;
            height: 10em;
            background-color: gray;
        }
    </style>
</head>
<body>
<main>
    <h1>Am I centered yet?</h1>
    <p>Center me, please!</p>
</main>
</body>
</html>

垂直居中解决方法

标签：

原文地址：http://www.cnblogs.com/scnuwangjie/p/5832923.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

垂直居中 解决方法

垂直居中解决方法