絕對定位後，position:absolute;不能使用margin: 0 auto;實現居中；
阿新 • • 發佈：2017-10-13
com height test 指點 meta color img absolut ext
聲明： web小白的筆記，歡迎大神指點！聯系QQ：1522025433.
我們都知道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>
瀏覽器效果圖：
是不是達到我們想要的結果了（認真看代碼中的註釋）。
絕對定位後，position:absolute;不能使用margin: 0 auto;實現居中；