鍍金池/ 問答/HTML/ CSS這樣為什么不能居中？？

CSS這樣為什么不能居中？？

position: absolute;display: block;width: 80%;margin:0 auto;

為什么改成這樣就可以了？第一種為什么不行？

position: absolute;display: block;width: 80%;margin:auto;right:0;left:0;
回答
編輯回答
墨小羽

傳送門

2017年6月11日 17:14
編輯回答
雨蝶

第一種不行，因為你設(shè)置了

position: absolute;

但top,bottom，left,right都沒有指定，則left，top值與原文檔流位置一致。即跟當(dāng)它static時的位置一樣，但是不占位。這個時候

margin: 0 auto;

這行代碼其實的不起作用的。

第二種可以，因為你指定了left和right為0，把元素充滿了容器，同時自身指定了寬度，總寬度計算方式：

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = 包含塊寬度

margin-left 以及 margin-right 值為 auto 的設(shè)為0，所以總寬度（固定） = width（固定） + margin-left + margin-right;（寬度為80%），到這一步，你就可以把

position: absolute;
left: 0;
right: 0;

這代碼無視了，它的作用其實可以理解為確定其元素的總寬度，

margin: 0 auto;

當(dāng)margin設(shè)置為auto的時候，左右邊距會平分，元素自然就居中了，垂直居中原理一致。

2017年10月19日 18:57
編輯回答
舊酒館

絕對定位元素居中是需要設(shè)置寬高的。。而且使用absolute后會帶有BFC特性，display會自動變?yōu)?code>block，你第二句也多余..

2017年7月9日 15:09
編輯回答
厭遇

絕對定位的元素設(shè)置margin 0auto是無效，你給了寬度，那么直接left 10%

2017年8月28日 17:47
編輯回答
清夢

問題應(yīng)該出在position: absolute;絕對定位后，margin:0 auto就不起作用了

2017年8月26日 23:51