css里上下居中怎么弄？(2)-木庄网络博客

当前第2页返回上一页

<style>
    #father {
        width: 500px;
        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>
</div>

不定高度：利用css3新增属性transform: translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
  
    #son {
        width: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateY(-50%);
}
</style>
  
<div id="father">
    <div id="son">我是块级元素</div>
</div>

效果：

方案二：使用flexbox布局实现（高度定不定都可以）

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

<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>