CSS形而上学：为什么页面垂直对齐如此困难？
相对于页面，CSS中的水平对齐很容易 - margin:0 auto获取大部分时间，而其他情况则为text-align:center 。
我对大师的问题不是如何垂直对齐，但为什么它更难？ 为什么不存在margin:auto 0 ？ 我的意思是，从编程的角度来看。
从理论上讲，似乎相同的算法适用于两种类型的对中。
好的问题，我不知道，但我会怀疑问题的根源在于HTML，因此它的渲染引擎原本是为了文档语义而不是布局/打印语义。 CSS在描述段落，标题和所有类型的文档问题方面非常出色，当涉及到每个人都希望他们的网站成为的大型DTP布局任务时，CSS确实很弱。
简而言之：我认为问题在于，HTML的任务并非用于非预期的事情。 奎尔惊喜。
从概念上讲，CSS规则以它们在HTML中出现的顺序应用于文档的元素，例如，在DOM树的预先遍历中。 从历史上看，这样可以在文档被加载时应用CSS，但即使使用动态HTML和动态CSS，也可以通过一次性应用CSS来获得性能优势。
这就是为什么CSS没有“A后跟B”或“A包含B”的选择器，而可以说“A先于B”或“A包含在B内”，这是因为在后一种情况下，A在预先遍历中位于B之前。
垂直居中很困难，因为在处理子元素的CSS（要居中的元素）时，父元素和子元素的高度（计算子元素顶部偏移所需的两个值）未知因为它们都依赖于尚未处理的元素。
通过绝对定位来克服对父元素高度的依赖： top: 50% 。 这有效地推迟了垂直偏移量的计算，直到父元素的高度已知为止。
同样，CSS3转换可以解释孩子的身高： transform: translateY(-50%) 。 在使用CSS3之前，通常使用负margin-top ，但是需要在子元素上设置固定的高度。
上一篇: CSS metaphysics: WHY is page vertical alignment so difficult?