前端值得一探究竟特辑 --- 五种垂直居中

1、利用inline元素和伪元素

设置伪元素。vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

即：有两个行内元素a和b，a和b都是img，
如果a加了vertical-align:middle样式，b的 底部（基线) 就会对齐a的中间位置；

如果a和b都加了一个vertical-align:middle样式。
那么就互相对齐了对方的中间位置；
也就是它们在垂直方向上的中线对齐了。

而伪元素的display属性默认值为inline
行内元素是无法设置宽高的
想要设置宽高需要将之设置为block或者inline-block。

    .container{
        width: 100%;
        height: 100%;
        background-color: skyblue;
    }
    .container:after{
        content:"";
        display: inline-block;
        height: 100%;
        width: 0;
        vertical-align: middle;
    }
    .img{
        width: 200px;
        vertical-align: middle;
    }
    <div class="container">
        <img class="img" src="../assets/img.jpg" alt="">
        <img class="img" src="../assets/img.jpg" alt="">
    </div>

2、利用absolut和translate

利用绝对定位垂直居中，
子元素==top:50%;==参照的是父元素的高度
==translateY(-50%);==参照的是自身高度。

注：仅使用于单独的子元素垂直居中

    .container{
        width: 100%;
        height: 100%;
        position: relative;
        background-color: skyblue;
    }
    img{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 200px;
    }
    <div class="container">
        <img src="../assets/pic.png" alt="">
    </div>

3、利用table-cell

把父元素display设置为table-cell,
父元素会作为一个表格单元格显示
可以设置其子元素的垂直对齐方式vertical-align:middle;

注：父元素宽高必须固定，不能使用百分比

    .container{
        width: 100vw;
        height: 50vh;
        background-color: skyblue;
        display: table-cell;
        vertical-align: middle;
    }
    img{
        height: 100px;
    }
  <div class="container">
        <img src="../assets/pic.png" alt="">
        <img src="../assets/pic.png" alt="">
    </div>

还可以用于多行文字居中

    .container-multi{
        width: 100%;
        height: 500px;
        background-color: skyblue;
        font-size: 84px;
        display: table-cell;
        vertical-align: middle;
    }
    <div class="container-multi">
            多行文字居中啊。多行文字居中啊。多行文字居中啊。多行文字居中啊。
    </div>

4、利用flex

把父元素display设置为flex
可以设置其子元素的垂直对齐方式align-items: center

    .container{
        width: 100%;
        height: 100%;
        background-color: skyblue;
        display: flex;
        align-items: center;/*  垂直居中 */
        /* justify-content: center; 水平居中*/
    }
    img{
        height: 200px;
    }
    <div class="container">
        <img src="../assets/img.jpg" alt="">
        <img src="../assets/img.jpg" alt="">
    </div>

5、利用line-height

父元素line-height与height相等即可，
仅适用于单行文字居中。

    .container{
        width: 100%;
        height: 500px;
        line-height: 500px;
        background-color: skyblue;
        font-size: 84px;
    }
    <div class="container">
        单行文字居中
    </div>