html - margin auto not work




css絕對位置不適用於margin-left:auto margin-right:auto (6)

假設您將以下css應用於div標籤

.divtagABS {
    position: absolute;
    margin-left: auto;  
    margin-right:auto;
 }

margin-left和margin-right不會生效

但如果你有親戚,那就行了

,divtagREL {
position: relative;
margin-left: auto;  
 margin-right:auto;
}

這是為什麼? 我只是想要一個元素的中心

有人可以解釋為什麼在絕對位置設置自動保證金不起作用嗎?


官方第一個正確答案來自 :

.divtagABS {
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}

其他答案主要涉及“黑客”類型的答案。 使用它總是會帶來比官方解決方案更多的風險(基於W3C CSS規範)。 黑客看起來像這樣。

第二個正確答案是幾個人。 但請注意值'auto'和'-50px'之間的差異。 這是您應該根據自己的選擇。 但這個答案看起來像這樣:

.divtagABS{
    width:300px;
    positon:absolute;
    left:0;
    right:0;
    margin:0 auto;
}

要理解這是一個hack這個解決方案,請考慮W3C規範中left屬性的摘錄:

對於絕對定位的元素

此屬性指定元素的左邊距邊緣與其包含塊的左邊緣之間的距離。

對於相對定位的元素

此屬性指定偏移量相對於框本身的左邊緣。

所以會發生從左0px /頂部0px繪製絕對定位元素(包括邊距)。 元素具有固定的寬度,因此對邊距屬性使用auto將選擇所有可用寬度並將其轉換為空白。 在兩側執行此操作,並通過將兩個對立面之間的所有可用寬度(左/右,頂部/底部)分開來使元素居中。

就個人而言,我更喜歡第一個,但我認為這是個人的。


在下面使用JSFiddle。 當使用絕對位置時, margin: 0 auto將不起作用,但你可以這樣做(也將縮放):

left: 50%;
transform: translateX(-50%);

更新:使用 JSFiddle


如果元素絕對位置,那麼它不是相對的,或者是對任何對象的引用 - 包括頁面本身。 所以margin: auto; 不能決定中間的位置。

它等待被明確告知,使用lefttop位置自己定位。

您仍然可以使用javascript或其他方式以編程方式將其居中。


如果絕對元素有寬度,您可以使用下面的代碼

.divtagABS{
    width:300px;
    positon:absolute;
    left:0;
    right:0;
    margin:0 auto;
}

我已經遇到了同樣的問題,我已經找到了一個解決方案,寫一個容器(在你的情況下是.divtagABS容器)絕對定位,然後相對定位內容(.divtagABS,在你的情況下)。

完成! 您的.divtagABS的margin-left和margin-right AUTO現在可以正常工作。


當您為absolute定義的分區定義樣式時,它們指定邊距是沒用的。 因為它們不再位於常規DOM樹中。

你可以使用float來做這個伎倆。

.divtagABS {
    float: left;
    margin-left: auto;  
    margin-right:auto;
 }




position