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

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" al