前端值得一探究竟特輯 --- 五種垂直居中

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>