CSS中心和元素

Question

爲什麼'保證金左右設置爲自動和最大。和分鐘。寬度'中心的一個元素？

#header{ 
    max-width: 1400px; 
    min-width: 360px; 
    margin-left: auto; 
    margin-right: auto; 
} 

我不明白。

Answer 1

它由兩部分上的元件的右側和左側的空的空間的總和，並將其用作margin-left和margin-right，由此定心它。思考它是從父的寬度減去孩子的寬度，然後除以另一種方式，通過2

在現實中，margin-left和margin-right仍設置爲auto，因此，如果您嘗試使用JavaScript獲取它們的值，您將獲得"auto"，但這是它背後的邏輯。

其背後的數學是：

marginLeft = (parentWidth - childWidth)/2 
marginRight = marginLeft 

Answer 2

因爲在這兩種左右邊距佔用「可用」空間同樣auto，該元素居中對齊。

帶有自動功能的左邊界或右邊界將佔用「可用」空間的所有空間，使元素看起來像是已被刷新的右或左。

查看此source瞭解更多信息。

您可以輕鬆地與下面的演示理解：

div{ 
 
    max-width: 300px; 
 
    background-color: red; 
 
    margin-left: auto; 
 
}

<div> 
 
auto 
 
</div>

在上面的代碼中，你可以看到，當您使用保證金左自動股利佔用了所有可用空間所以它向右推。現在，你可以認爲通過使用margin-right:auto;將元素推向左側。因此，使用兩者都會強制它保持在中心位置，同時佔用兩個可用空間。

Answer 3

由於我不滿意其他答案的詳盡性，下面是一個更詳細的解釋。一般而言，w3c Recommendation詳細闡述了這一點，應該爲需要更精確答案的問題諮詢。

---

典型的使用情況下margin: 0 auto（頂部和底部設置爲0，左，右自動）的工作原理是具有瀏覽器計算的可用空間，並將其應用到一個屬性的每個auto值，等分 。

在嘗試還提供「背後的數學」一個例子（我把這個引號，因爲它是實際的數學的一個非常簡單的可視化）更接近這一點：

availableSpace = (parentWidth - childWidth) 
marginLeft, marginRight = availableSpace/amountOfAutoValues 

這將在下列條件下工作（簡體）：

• 它不是absolute - 或fixed -positioned
• 它不是浮動
• 它不是一個inline元素（這是從「它必須是一個block元素」，這是錯誤的區別 - 例如，inline-block將無法​​正常工作）

這是因爲這些模式已經覆蓋對象在文檔中的位置，並計算邊距可能不是有利的。

---

唯一的要求就是邊距設置爲它在技術上應用 - 你只需要設置與母體width（或max-width）更小，以看到效果，就像在任何其他情形，可用空間將簡單地爲0。
min-width以這種方式決不會對自動邊距產生任何影響。

Answer 4

你可以做到如果不是max-width和min-width你的代碼的margin + auto值和休息一起使用display:table相同的結果。如果只剩下margin-left，它將與頁面的最右端對齊，如果只剩下margin-right，它將對齊到最左邊，現在如果將它與margin-left margin-right一起離開，您會發生什麼？我很肯定你不會造成矛盾。 :)

-------------------------> margin-left:auto 

margin-right:auto <------------------------ 

margin-left:auto <-------> margin-right:auto