vertical-align:middle 无效问题

1.定高元素

vertical-align:middle的作用域：

1.行内元素inline

2.表格元素table-cell

如果元素的高度是固定的，只需将display设置为table-cell即可，但是在实际项目中不可能一定会是定高

.box1{
            height: 100px;
            width: 100px;
            display: table-cell;
            background: darkcyan;
            vertical-align: middle;
        }

 <div class="box1">
        <span>
            测试
        </span>
    </div>

2.不定高元素

   .box1 {
            height: 10%;
            width: 100%;
            background: darkcyan;
        }

        .box1::after {
            content: "";
            display: inline-block;
            height: 100%;
            vertical-align: middle;

        }

<div class="box1">
        <span>
            测试
        </span>
    </div>