@15013890200 2018-09-21T17:56:12.000000Z 字数 2031 阅读 504

元素垂直居中

css flex 布局 grid

元素垂直居中，一直都是前端初学者头疼的地方。之前也一直困扰着我。虽然实现方式多样，但是却找不到一个最优解。终于有一次看到别人整理的多达20多种方法，让我茅塞顿开，原来还可以这样玩。自己也亲测了自己感兴趣qie简洁的10多种方法。

总结：flex方法最为简便（当然grid也一样）

将父元素display属性设置为flex，就可以通过很多种方式达到垂直居中效果

将父元素display属性设置为grid，也可以通过很多种方式达到垂直居中效果，方法比flex还多。最特别的方法是 grid + template 方式，将父元素当画布处理，对应第 9 种方法

绝对定位也可以解决垂直居中问题。其中transform属性 + translate方法很推荐，对应方法5

外层line-height设置为父元素的高度，内层line-height高度设为1，也可以勉强达到，对应方法1

利用伪类元素，对应方法2

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vertical</title>
    <style type="text/css">
        *{clear: both;margin: 0;padding: 0;}
        .div_parent{width: 300px;height: 200px;border:1px solid #ddd;text-align: center;margin: auto;}
        .way{display: inline-block;width: 200px;height: 50px;}
        .parent1{line-height: 200px;}
        .way1{line-height: 1;}
        /** 推荐使用 */
        .parent2:before{content: '';display: inline-block;height: 100%;width: 0;vertical-align: middle;}
        .way2{vertical-align: middle;}
        /** 需要事先知道父容器的宽高 */
        .parent3{position:relative;}
        .way3{position: absolute;top: 50%;left: 50%;margin-top: -25px;margin-left:-100px;}
        /** 定位元素需要指定高度（百分比也算） **/
        .parent4{position: relative;}
        .way4{position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}
        /** css3 transform属性 + translate方法 **/
        .parent5{position: relative;}
        .way5{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
        /** flex + align-items 最简洁 **/
        .parent6{display: flex;align-items: center;justify-content: center;}
        .way6{}
        /** flex + margin **/
        .parent7{display: flex;}
        .way7{margin: auto;}
        /** flex + align-self **/
        .parent8{display: flex;justify-content: center;}
        .way8{align-self: center;}
        /** grid + template 将元素当画布用，很溜 **/
        .parent9{display: grid;grid-template-columns: 1fr auto 1fr;grid-template-rows: 1fr auto 1fr;
            grid-template-areas: 
            '. . .'
            '. amos .'
            '. . .';
        }
        .way9{grid-area: amos;}
        /** grid + align-items **/
        .parent10{display: grid;align-items: center;justify-content: center;}
        .way10{}
        /** grid + align-self **/
        .parent11{display: grid;justify-content: center;}
        .way11{align-self: center;}
        /** grid + margin **/
        .parent12{display: grid;}
        .way12{margin: auto;}
    </style>
</head>
<body>
    <div class="div_parent parent12">
        <div class="way way12">我的文件夹科技馆陶如果减街文化馆覅而
        华润给欧文和覅而阿努皓哥飞日国际化</div>
    </div>
</body>
</html>

元素垂直居中

内容目录