css - 为什么不能使用边距或填充进行垂直居中？

Question

好的，就像任何不得不使用 css 的人一样，我知道除了使用显示表中的“假表”之外，您不能动态地垂直居中元素。（动态我的意思是“如果你不知道居中的元素，或者容器的大小，或者两者都知道”。）

我想了解的是为什么？我曾尝试过使用护目镜，但所有这些发现都是解决方法，而我感兴趣的是这样一个奇怪决定背后的哲学。

那么，为什么可以使用 margin:auto 水平居中，而不是垂直居中？据我所知，你可以在盒子模型中对表格单元格做任何事情，你可以对 div 做任何事情，但只有前者会让你垂直居中。为什么要编写一个演示语言标准（据我所知，它说边距和填充的垂直“自动”等于 0）可以做到这一点？

score 3 · Accepted Answer

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

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

HTML 布局传统上不是为指定垂直行为而设计的。就其本质而言，它会按宽度缩放，并且内容会根据可用宽度流动到适当的高度。传统上，水平尺寸和布局很容易；垂直尺寸和布局由此衍生。

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

score 0 · Accepted Answer

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

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

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

当然，您可以使用其他值，例如width: 80%，因此top应该是10%。

2 回答 2