div垂直居中

<style>
    #father {
        width: 1000px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
   #son {
        height: 100px;
        background-color: green;
        position: absolute;
        top: 50%;
        margin-top: -50px;
}

</style>
 
<div id="father">
    <div id="son">我是块级元素</div>

如果子级元素高度不固定的话，就用css3的transform，设置y轴的偏移为-50%

#son {
        width: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateY(-50%);
}

还有一种方法用flex

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        align-items: center;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

行内元素的垂直居中，给父元素设置display:table-cell;和vertical-align: middle;属即可：

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }
 
    #son {
        background-color: green;
    }
</style>
 
<div id="father">
    <span id="son">啊啊啊啊啊啊啊啊啊啊啊啊啊</span>
</div>

本文转载自https://blog.csdn.net/weixin_37580235/article/details/82317240