一个div在另一个div中水平垂直的方法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

html

<div id="main">
<div id="box">
一个div在另一个div中垂直居中实现方法
</div>
</div>

一、宽高都定的div在另一个div中水平垂直居中实现方法

css样式：

方法一：

#main{
width: 300px;
height: 300px;
position: relative;
background: yellow;
}
#box{
position: absolute;
width: 100px;
height: 140px;
left: 50%;
top: 50%;
margin-left: -50px;/*width的一半*/
margin-top: -70px;/*height的一半*/
background: red;
}

方法二：

#main{
width: 300px;
height: 300px;
position: relative;
background: yellow;
}
#box{
position: absolute;
margin: auto;
width: 100px;
height: 140px;
left:0;
right: 0;
top: 0;
bottom: 0;
background: red;
}

二、不定宽高的div在另一个div中水平垂直居中实现方法

css样式：

#main{
position: relative;/*在父元素中使用相对定位*/
width: 500px;
height: 200px;
overflow: hidden;
background-color: #ff0;
padding: 10px;
}
#box{
position: absolute; /*在子元素中使用绝对定位*/
top:50%; /*距离相对于父元素的50%的高*/
left:50%;
background-color: #eee;
-webkit-transform:translate(-50%,-50%); /*CSS3的样式，:translate(-50%,-50%)相对于自己距离x轴和y轴的-50%*/
transform:translate(-50%,-50%);
}