7种CSS实现垂直居中的方法总结

忽然发现自己已经有段时间没有好好的复习下CSS布局了，有点惭愧啊~于是打算总结一下关于CSS垂直居中的7种方法。

1. 设定行高(line-height)
   在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了。这种方式适用于单行的“行内元素”。将line-height设成和父容器高度一样的数值，内容中的行内元素就会垂直居中。因为是行高，会在行内元素的上下加上行高的1/2，所以就会垂直居中。想要文本水平居中设置text-align：center即可。

html:    
    <div class="main">
        <span class="content">Hello Febby</span>
    </div>
css:
    .main{
        width:150px;
        height:150px;
        margin:50px;
        border:1px solid red;
    }
    .content{
        width:150px;
        line-height: 150px;
        text-align: center;
        display: inline-block;
    }

2. 通过伪元素:before实现CSS垂直居中。
如果想要让多行元素都能垂直居中，则需要用到伪元素。顺便复习一下vertical-align属性的用法，vertical-align属性是指元素内的所有元素垂直位置互相垂直，而不是相对于外框高度垂直居中。vertical-align这个是设置元素的垂直排列的.用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐。这时我们可以利用伪元素::before添加一个div，让这个伪div的高度达到100%，这样其他div就可垂直居中了，但div 本身就是块级元素，而vertical-align是行内元素属性，则需要修改为inline-block。具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。

html:
    <div class="main">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
    
css:
    .main{
        width:200px;
        height: 200px;
        margin:50px;
        letter-spacing: -10px; /*属性的值为一个负值，解决inline和inline-block元素的默认间距 */
        border:1px solid red;
    }

    .main::before{
        content:'';
        width:0;
        height:100%;
        vertical-align: middle;
        display: inline-block;
    }
    .left{
        width:50px;
        height: 80px;
        vertical-align: middle;
        background:red;
        display: inline-block;
    }
    .middle{
        width:50px;
        height: 100px;
        vertical-align: middle;
        background:blue;
        display: inline-block;
    }
    .right{
        width:50px;
        height: 150px;
        vertical-align: middle;
        background:green;
        display: inline-block;
    }

3.已知父元素高度通过transform实现CSS垂直居中。
可以利用transform这个css3属性，这时子元素需要相对定位position:relative（相对于其正常（原先本身）位置进行定位），同时搭配bottom这个属性使用，再通过translateY即可定位到垂直居中的位置。想要子元素水平居中，可以搭配left属性，再通过translateX即可定位到水平居中的位置。

html:
    <div class="main">
        <div class="box"></div>
    </div>
css:
       .main{
        width:200px;
        height: 200px;
        margin:50px;
        border:1px solid red;
    }

    .box{
        width:80px;
        height: 80px;
        position: relative;
        left:50%;
        bottom:50%;
        transform:translateX(-50%) translateY(-50%);
        background:red;
    }

4. 绝对定位
绝对定位position:absolute,要注意的是设定绝对定位的子元素其父元素position要指定为relative,将上下左右的数值都设置为0，同时margin:auto，但绝对定位会脱离正常文档流，会相互覆盖，如果内容较多是可能会出现布局问题。

html:
    <div class="main">
        <div class="box1"></div>
    </div>
css:
    .main{
        width:200px;
        height: 200px;
        margin:50px;
        position: relative;
        border:1px solid red;
    }
    .box1{
        width:80px;
        height: 80px;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        background:red;
    }

5. 通过display:flex实现CSS垂直居中。
   通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center。

html:
    <div class="main">
        <div class="box2"></div>
    </div>
css:
   .main{
        width:200px;
        height: 200px;
        margin:50px;
        display:flex;
        border:1px solid red;
    }
    .box2{
        width:80px;
        height: 80px;
        align-self: center;
        background:red;
    }

6. calc动态计算
当div的display属性只能是block时，我们可以用到css的calc动态计算，让居中的div的top属性为上方距离是50%的外框高度-50%的居中div高度，即top:calc(50%外框高度-50%居中div高度)。其中父元素position定位为relative，子元素position定位为absolute。水平居中同理。

html:
    <div class="main">
        <div class="box3"></div>
    </div>
css:
    .main{
        width:200px;
        height: 200px;
        margin:50px;
        position:relative;
        border:1px solid red;
    }
    .box3{
        width:80px;
        height: 80px;
        position:absolute;
        top:calc(50% - 40px); /*垂直居中 */
        left:calc(50% - 40px); /*水平居中 */
        background:red;
    }

7. 通过display:table-cell实现CSS垂直居中。
组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中。
可以将父元素设置display:table，子元素table-cell会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中。

html:
    <div class="main">
        <p class="box4">Hello Febby</p>
    </div>
css:
    .main{
        width:200px;
        height:200px;
        margin:50px;
        border:1px solid red;
        display: table;
    }
    .box4{
        background:red;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

以上就是7种CSS实现垂直居中的方法总结，希望可以帮到大家！后续还会继续补充~