您的位置:首页 - 教程 - CSS - 正文
CSS绝对定位的盒子水平垂直居中显示

 

水平垂直居中显示

如果没有绝对定位,只需要 margin: 0 auto盒子即可实现水平垂直居中显示;如果盒子绝对定位了,margin: 0 auto就会失效。在父亲相对定位的前提下,要想实现绝对定位的儿子水平垂直居中显示,可以使用如下代码:

position:absolute;
left:50%; //left设置为50%,这时盒子是以元素的左侧进行的水平居中,所以需要设置margin-left为负元素宽度的一半。
top:50%;//top设置为50%,这时盒子是以元素的上侧进行垂直居中显示,所以需要设置margin-top为负元素高度的一半。
width:200px;
height:200px;
margin-top:-100px;
margin-left:-100px;


参考:http://www.cnblogs.com/jihua/archive/2013/05/14/3077058.html

评论: