如何讓多行文字垂直居中？或者如何讓圖片垂直居中？

1.demo--css

    .box {
            width: 300px;
            height: 300px;
            background-color: #f5e79e;
            text-align: center;
            font-size: 0; //父元素設定為0祛除換行符或空格
        }

        .box img {
            vertical-align: middle;
        }

        .box span 
 
{
            font-size: 20px;
            width: 220px;
            display: inline-block; //居中的元素必須是inline-block或inline-blick型別
            vertical-align: middle; //必須
            text-align: left;
        }

        .box:after {
            display: inline-block; //必須
            width: 0;
            height
 
: 100%;
            content: "center";
            vertical-align: middle; //必須
            overflow: hidden;
        }

2.demo--html

<div class="box">
    <!--<img width="200" src="images/s.png" >-->
    <span>多行文字垂直居中測試多行文字垂直居中測試多行文字垂直</span>
</div>

3.效果圖

4.備註

4.1原理： 具有vertical-align:middle屬性的圖片靠在一起是會垂直居中對齊的。其實不只是圖片只要是inline-block屬性或是類似inline-block屬性的兩個或以上元素靠在一起都可以實現垂直居中對齊。

4.2實現方法：我們可以自己造一個帶有vertical-align:middle屬性的隱藏元素，然後讓我們需要的文字元素或者圖片元素跟它靠在一起實現垂直居中對齊。利用content內容生成技術，用:after偽類+content生成 width: 0; height: 100%; 並帶有display:inline-block;和vertical-align:middle;屬性的實體標籤就行了。

4.3參考文章：https://www.zhangxinxu.com/wordpress/2010/09/after%E4%BC%AA%E7%B1%BBcontent%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/