35
相对于页面而言，CSS中的水平对齐很容易 - 一个margin:0 auto可以让您在很长的一段时间内完成工作，而对于其他一些情况，则可以使用text-align:center。CSS形而上学：为什么页面垂直对齐如此困难？
我对大师的问题不是如何垂直对齐，而是为什么是如此困难？为什么没有margin:auto 0？我的意思是，从编程的角度来看。
从理论上讲，似乎相同的算法将适用于两种类型的居中。
A
回答
17
好问题，我不知道，但我会怀疑问题的根源在于HTML，因此它的渲染引擎最初是为了文档语义而不是布局/打印语义。 CSS在描述段落，标题和所有类型的文档问题方面非常出色，当涉及到每个人都希望他们的网站成为的大型DTP布局任务时，CSS确实很弱。
简而言之：我认为问题在于HTML的任务并非用于非预期的目的。奎尔惊喜。
+33
CSS 4和HTML 6，请让'vertical-align：center;'处理任何事情。请。 – william44isme 2013-11-13 20:15:27
4
从概念上讲，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来代替，但这需要在子元素上设置固定的高度。
我认为这是因为浏览器可以很容易地知道页面的宽度，但是长度根据内容而改变。 – imgx64 2010-10-14 08:06:56
这就是我所说的算法 - 宽度也可以动态改变，但CSS保持不变。为什么不垂直改变？ – Ben 2010-10-14 08:09:59