CSS 玄学：为啥页面垂直对齐如此困难？

Posted 2023-03-05

【中文标题】CSS 玄学：为啥页面垂直对齐如此困难？

【英文标题】：CSS metaphysics: WHY is page vertical alignment so difficult?CSS 玄学：为什么页面垂直对齐如此困难？

【发布时间】：2011-04-25 06:37:42

【问题描述】：

相对于页面，CSS 中的水平对齐很容易——margin:0 auto 可以让您在大部分时间里得到满足，而text-align:center 在其他一些情况下。

我对大师的问题不是如何垂直对齐，而是为什么要困难得多？为什么没有margin:auto 0？我的意思是，从编程的角度来看。

从理论上讲，似乎相同的算法适用于两种类型的居中。

【问题讨论】：

我认为这是因为浏览器可以很容易地知道页面的宽度，但长度会根据内容而变化。

这就是我对算法的意思——宽度也可以动态改变，但 CSS 会跟上。为什么不进行垂直变化？

【参考方案1】：

好问题，我不知道，但我怀疑问题的根源在于 html，因此它的渲染引擎最初是为文档语义而不是布局/打印语义而设计的。 CSS 非常擅长描述段落、标题和各种文档问题，但在涉及到现在每个人都希望自己的网站成为的更大的 DTP 布局任务时，CSS 确实很弱。

简而言之：我认为问题在于 HTML 的任务是做一些它不打算做的事情。奎尔惊喜。

【讨论】：

CSS 4 和 HTML 6，请让 vertical-align: center; 处理任何事情。请。

【参考方案2】：

从概念上讲，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 代替，但这需要在子元素上设置固定高度。