绝对定位的盒子水平垂直居中显示

 

如果没有绝对定位，只需要 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;