html
<div id="main">
<div id="box">
一个div在另一个div中垂直居中实现方法
</div>
</div>
一、宽高都定的div在另一个div中水平垂直居中实现方法
css样式:
方法一:
#main{ 300px; height: 300px; position: relative; background: yellow; } #box{ position: absolute; 100px; height: 140px; left: 50%; top: 50%; margin-left: -50px;/*width的一半*/ margin-top: -70px;/*height的一半*/ background: red; }
方法二:
#main{ 300px; height: 300px; position: relative; background: yellow;
} #box{ position: absolute; margin: auto; 100px; height: 140px; left:0; right: 0; top: 0; bottom: 0; background: red; }
二、不定宽高的div在另一个div中水平垂直居中实现方法
css样式:
#main{ position: relative;/*在父元素中使用相对定位*/ 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%); }