Question

好吧，就像那些曾经不得不使用css的人一样，我知道你不能动态地将一个元素垂直居中，而不是使用display-table中的“假表”。（动态地，我的意思是“如果你不知道居中的元素，或容器的大小，或两者兼而有之。”）

我想了解的是为什么？我已经尝试过瞪眼，但所有这些都是解决方法，当我感兴趣的是这种奇怪决定背后的哲学时。

那么，为什么可以使用保证金：自动水平居中，但不是垂直居中？据我所知，你可以在盒子模型中做一切你可以对div做的表格单元格，但只有前者会让你垂直居中。为什么要写一个表示语言标准（据我所知，它说边距和填充的垂直“自动”相当于0）这样做？

Answer 1

因为，只要创建元素，就可以确定元素的宽度。百分比只是（百分比*父宽度），绝对宽度就是那个宽度。我们知道宽度。但是，直到该元素中的所有内容都已呈现并且还确定了这些元素和内容的高度之后，才会确定高度。

虽然宽度可以由元素的内容决定，但高度总是由元素的内容决定。

传统上，HTML布局并非旨在指定垂直行为。就其本质而言，它在宽度方向上缩放，并且内容根据可用宽度流向适当的高度。传统上，水平尺寸和布局很容易;垂直尺寸和布局源于此。

因此，元素无法准确确定在内容完全呈现之前，顶部和底部的边距（或填充）需要是什么。由于首先应用这些元素以及其中的任何其他元素和内容也可以正确呈现，因此忽略值auto。

Answer 2

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

这是一种水平和垂直居中元素的方法：

#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/