我們都知道margin: 0 auto；可也實作塊狀元素的水準居中；但是對于絕對頂為的元素就會失效；
請看執行個體：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>絕對定位後margin: 0 auto;居中失效的解決方法</title>
<style type="text/css">
.test-out {
width: 500px;
height: 500px;
margin: 0 auto; /*實作父元素居中*/
background: red;
}
.test-in {
width: 200px;
height: 200px;
margin: 0 auto; /*實作子元素居中*/
background: blue;
}
</style>
</head>
<body>
<div class="test-out">
<div class="test-in"></div>
</div>
</body>
</html> 浏覽器效果圖：
我們可以看出在正常情況下： margin: 0 auto; 實作居中真是棒棒的！
我們把css樣式修改為：
<style type="text/css">
.test-out {
position: relative; /*作為子元素的 定位包含框，使子元素在父元素内 進行定位*/
width: 500px;
height: 500px;
margin: 0 auto; /*實作父元素居中*/
background: red;
}
.test-in {
position: absolute; /*子元素實作絕對定位*/
width: 200px;
height: 200px;
margin: 0 auto;/* 此時會失效*/
background: blue;
} 浏覽器效果：
子元素（藍色盒子）的居中效果已失效！
絕對定位以後margin: 0 auto;實作居中失效的解決方法：
為了使子元素（藍色盒子）在絕對定位下實作居中，我們可以利用定位和margin-left取相應的負值，實作居中；
具體代碼如下：
<style type="text/css">
.test-out {
position: relative; /*作為子元素的 定位包含框，使子元素在父元素内 進行定位*/
width: 500px;
height: 500px;
margin: 0 auto; /*實作父元素居中*/
background: red;
}
.test-in {
position: absolute; /*子元素實作絕對定位*/
top: 0;
left: 50%; /*先定位到父元素（紅盒）的中線，然後使子元素（紅盒）的外邊界 左偏移， 半個子元素（紅盒） 的寬度，即可*/
margin-left: -100px;/*向左 偏移元素的總寬度的一半*/
width: 200px;
height: 200px;
background: blue;
}
</style>