vertical-align middle不生效如何修改

vertical-align的定义

W3C上对vertical-align的定义：vertical-align 属性设置元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

baseline：默认值，元素放置在父元素的基线上。
top：把元素的顶端与行中最高元素的顶端对齐；
middle：把此元素放置在父元素的中部。
bottom：把元素的顶端与行中最低的元素的顶端对齐。

1.在父元素中增加display:table-cell，vertical-align 写在在父元素中

<style>
    .wrapper {
        width: 500px;
        height: 500px;
        background-color: pink;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: deepskyblue;
        display: inline-block;
    }
</style>

<div class="wrapper">
    <div class="box">11111</div>
</div>

2.在父元素中增加空的span元素，并设置其高度为100%，vertical-middle居中

<style>
.btn {
    width: 500px;
    height: 500px;
    background-color: pink;
    text-align: center;
}
.btn span {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.btn .box {
    width: 100px;
    height: 100px;
    background-color: deepskyblue;
    display: inline-block;
    vertical-align: middle;
}
</style>

<div class="btn">
    <span></span>
    <div class="box"></div>
</div>

3.父元素line-height 100% 和子元素vertical-align:middle

<style>
.btn {
    width: 500px;
    height: 500px;
    line-height: 500px;
    background-color: pink;
    text-align: center;
    vertical-align: middle;
}
.btn .box {
    width: 100px;
    height: 100px;
    background-color: deepskyblue;
    display: inline-block;
}
</style>

<div class="btn">
    <div class="box"></div>
</div>

链接: https://blog.csdn.net/weixin_38984030/article/details/117470279