爲什麼包括寬度使邊距：自動中心塊級元素正確？

如果我有一個塊級元素，我選擇它在CSS中並聲明CSS規則margin: auto;然後沒有任何事情發生。但是當我包含width: 100px;時，它突然變爲居中在屏幕中間。爲什麼包括width會發生這種情況？爲什麼包括寬度使邊距：自動中心塊級元素正確？

糾正我，如果我錯了，但保證金：汽車;依賴於父和子元素的定義寬度？ –

@DavidCalvin'margin：auto;'只需要塊級元素。但是，子元素上的百分比高度也需要父級也具有設置高度。 – hungerstar

Becaue最初div佔據了整個寬度，但是你在css中提到寬度就像width：100px和margin：auto。寬度將被設置並且居中對齊 –

它實際上中心的DIV！如果你試圖給div分配一個顏色，你會發現div實際上填滿了頁面的整個寬度，並且實際上居中（或者說他們已經填充了整個空間，沒有地方可以水平移動）。

如果您沒有爲它們定義寬度，div會自動填充其父項的寬度。

如果你把`width：100px'給了他們，那只是說明它實際上是居中。

UPDATE（hungerstar希望它是更多的技術）：

你有一個500像素寬度的父容器，並在其中一個孩子說你的風格margin 0 auto;

那個孩子爲中心，但它是隻是不明顯。爲什麼？因爲div自動適合自己的父（divs有width: auto;作爲默認值，如果你沒有指定它），因此它的寬度也是500px，剩餘空間讓它在父級中水平移動。

如果指定的寬度大於500px，則會溢出到其父容器的右側，因爲瀏覽器首先優先考慮左邊距，但如果使用400px寬度指定，則會啓動margin: 0 auto;並計算左邊距通過(parent_width - this_child_width)/2，然後根據該方程式留下剩餘空間分配右邊距。

因此我們有this_child_width = 500px和parent_width = 500px因此(500px-500px)/2 = 0。左邊和右邊0邊距= CENTERED。

2015-05-08 01:38:56

這是他的問題的答案。問題是：爲什麼包括寬度使邊距：自動中心塊級元素正確？因此這是一個有效的答案。 –

驗證某件作品不是答案。說它填滿整個與沒有解釋**如何**設置塊級元素的邊界爲「自動」居中它。那麼，它以一種非常模糊的迂迴方式，因爲它會佔據整個寬度。我希望看到更多技術性的東西。有人說，我如何確定這個元素將居中並佔據整個寬度？ – hungerstar

@hungerstar你顯然看不到點先生。這就是實際的答案，如果你把'margin：0 auto'放在它上面，它就已經居中了，但是你不能看到它，因爲如果它填滿整個寬度，它實際上不會顯示出來。如果將寬度設置得比之前小，那麼對中會明顯發生。 –

其實很簡單。自動計算邊距需要一個參考點。

的公式是這樣的：

container - width = total margin allowance

由於容器內的1000像素容器700像素元素：

1000px - 700px = 300px for margins

如果你只有一個汽車保證金，那麼保證金將爲300px。如果您有兩個邊距（如margin: 0 auto;），它們設置左邊距和右邊距，則每個左邊距和右邊距300px/2 = 150px將得到150px。在設置寬度塊級元素的每一邊添加相同數量的邊距就是創建居中效果的原因。

現在嘗試沒有設置寬度的公式。

1000px - ?? = ?? for margins

單利潤率爲??/1 = 100% of ??和兩個利潤??/2 = 50% of ??。

百分比寬度做工精細也是因爲：

1000px - 50% = 500px或1000px - 500px = 500px（截至1000像素的50％是500像素）

2015-05-08 01:38:34 hungerstar

回答