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