如果沒有絕對定位,只需要 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;