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

Question

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

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

那么，为什么可以使用 margin:auto 水平居中，而不是垂直居中？据我所知，您可以在盒模型中对表格单元格执行所有操作，就像您对 div 执行的操作一样，但只有前者能让您垂直居中。为什么有人会编写一种表示语言标准(据我所知，它说边距和填充的垂直“自动”相当于 0)来做到这一点？

Answer 1

因为，元素的宽度在元素创建的时候就可以确定了。百分比就是(百分比 * 父级宽度)，绝对宽度就是那个宽度。我们知道宽度。然而，直到该元素内的所有内容都已呈现并且这些元素和内容的高度也已确定后，才会确定高度。

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

发件人:Understanding vertical-align, or "How (Not) To Vertically Center Content"

HTML layout traditionally was not designed to specify vertical behavior. By its very nature, it scales width-wise, and the content flows to an appropriate height based on the available width. Traditionally, horizontal sizing and layout is easy; vertical sizing and layout was derived from that.

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