爲什麼不能使用邊距或填充進行垂直居中？

Question

好吧，和任何曾經使用過CSS的人一樣，我知道你不能動態垂直居中元素，而不是使用display-table中的「假表」。 （動態地，我的意思是「如果你不知道居中的元素，或容器的大小，或兩者兼有」。）

我想了解的是爲什麼？我嘗試過使用goggling，但所有這些發現都是解決方法，當我感興趣的是這種奇怪決定背後的哲學。

那麼，爲什麼可以使用margin：auto來橫向居中，但不是垂直？據我所知，你可以在盒子模型中將所有東西都做到一個表格單元格，你可以對一個div進行操作，但只有前者才能讓你垂直居中。爲什麼會有人編寫一個演示語言標準（據我所知，它說邊距和填充的垂直「自動」等於0）這樣做？

Answer 1

您不能在不知道其寬度的情況下水平居中元素。

這裏是水平和垂直中心的元素的方式：

#main { 
    width: 50%; 
    height: 50%; 
    position: absolute; 
    top: 25%; 
    left: 25%; 
} 

當然可以使用其他值，諸如width: 80%，因此所述top應10%。

看一看這裏的動態高度（快速搜索並沒有仔細閱讀）：http://css-tricks.com/snippets/css/center-div-with-dynamic-height/

Answer 2

因爲，元素的寬度可以儘快創建元素決定。百分比只是（百分比*父寬度），絕對寬度就是這個寬度。我們知道寬度。然而，高度不會被確定，直到該元素內的所有內容被渲染並且這些元素和內容的高度也被確定爲止。

雖然寬度可以由元素的內容來確定，該高度是總是由元素的含量來確定。

來源：Understanding vertical-align, or "How (Not) To Vertically Center Content"

HTML佈局傳統上並不是用來指定垂直行爲。就其性質而言，它在橫向上縮放，並且內容根據可用寬度流到適當的高度。傳統上，橫向尺寸和佈局很容易;垂直尺寸和佈局是從中推導出來的。

因此，一個元素無法準確地確定它的內容完全呈現之前其頂部和底部的邊距（或填充）需要達到的程度。由於這些內容是首先應用的，因此其中的任何其他元素和內容也可以被適當渲染，所以值auto會被忽略。