CSS玄学：为什么页面垂直对齐如此困难？
相对于页面，CSS 中的水平对齐很容易 - 大多数时候使用 margin:0 auto 即可，而 text-align:center 则适用于其他一些情况。
我对专家们的问题不是如何垂直对齐，而是为什么它如此困难？为什么没有 margin:auto 0？我的意思是，从编程的角度来看。
从理论上讲，似乎相同的算法适用于两种类型的居中。
Relative to the page, horizontal alignment in CSS is easy - a margin:0 auto gets you by much of the time, and a text-align:center for some other cases.
My question to the gurus is not how to vertically align, but why is it so much more difficult? Why isn't there margin:auto 0? I mean, from a programming perspective.
Theoretically, it seems like the same algorithms would apply to both types of centering.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（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来代替，但这需要在子元素上设置固定的高度。Conceptually, CSS rules are applied to the elements of a document in the order they appear in the HTML, i.e., in a pre-order traversal of the DOM tree. Historically, this was so that the CSS could be applied as the document was being loaded, but even with dynamic HTML and dynamic CSS, there are performance advantages to being able to apply the CSS in a single pass.
This is why CSS has no selectors for "an A followed by a B" or "an A which contains a B", whereas it's possible to say "an A preceded by a B" or "an A contained inside a B", because in the latter cases, A precedes B in a pre-order traversal.
Vertical centering is difficult because at the time the CSS for the child element (the element to be centered) is processed, the heights of the parent and child elements (the two values required to compute the top offset of the child element) are not known, as they both depend on elements which have not yet been processed.
The dependence on the height of the parent element is overcome by absolute positioning:
top: 50%. This effectively defers calculation of the vertical offset until after the height of the parent element is known.Similarly, CSS3 transforms can account for the height of the child:
transform: translateY(-50%). Prior to CSS3, it was common to use negativemargin-topinstead, but that required setting a fixed height on the child element.好问题，我不知道，但我怀疑问题的根源在于 HTML，因此渲染引擎最初是用于文档语义而不是布局/打印语义。 CSS 非常擅长描述段落、标题和各种文档问题，但在处理更大的 DTP 布局任务（现在每个人都希望自己的网站达到这样的效果）时却显得很弱。
简而言之：我认为问题在于 HTML 被分配了一些它不应该做的事情。奎尔惊喜。
Good question and I don't know, but I would suspect the root of the problem is going to lie in HTML and therefore it's rendering engines being originally intended for document semantics as opposed to layout/printing semantics. CSS is exceptionally good at describing paragraphs, headings, and all kinds of document concerns and really weak when it comes to the larger DTP layout tasks which everyone now wants their websites to be.
In a nutshell: I think the problem is that HTML is being tasked for things it was not intended for. Quel surprise.