CSS形而上学:为什么页面垂直对齐如此困难？

Question

相对于页面,CSS中的水平对齐很容易 - margin:0 auto大部分时间都可以获得,而text-align:center对于其他一些情况则是如此.

我对大师的问题不是如何垂直对齐,但为什么这么难？为什么不存在margin:auto 0？我的意思是,从编程的角度来看.

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

Answer 1

好问题,我不知道,但我怀疑问题的根源在于HTML,因此它的渲染引擎最初用于文档语义而不是布局/打印语义.CSS非常擅长描述段落,标题和各种文档问题,而且当涉及到每个人现在都想要他们的网站的大型DTP布局任务时,CSS非常弱.

简而言之:我认为问题在于HTML的任务是针对不适合的事情.奎尔惊喜.

Answer 2

从概念上讲，CSS规则按照它们在HTML中出现的顺序（即，以DOM树的预先遍历方式）应用于文档的元素。从历史上看，这样做是为了可以在加载文档时应用CSS，但是即使使用动态HTML和动态CSS，通过单次应用CSS也具有性能优势。

这就是CSS没有选择“ A后跟B”或“包含B的A”的选择器的原因，而可以说“ A前面有B”或“ A包含在B内”的选择器是因为在后一种情况下，A在预遍历中先于B。

垂直居中很困难，因为在处理子元素（要居中的元素）的CSS时，父元素和子元素的高度（计算子元素的顶部偏移量所需的两个值）是未知的，因为它们都依赖于尚未处理的元素。

上的父元素的高度的依赖性是由绝对定位克服：top: 50%。这有效地推迟了垂直偏移的计算，直到知道父元素的高度为止。

同样，CSS3转换可以说明子项的高度：transform: translateY(-50%)。在CSS3之前，通常使用负数margin-top来代替，但这需要在子元素上设置固定的高度。