CSS形而上学：为什么页面垂直对齐如此困难？
相对于页面，CSS中的水平对齐很容易-在margin:0 auto很多情况下可以使您省时，而在text-align:center其他情况下则可以。
我对专家的问题不是如何垂直对齐，而是 为什么 要困难得多？为什么不在那里margin:auto 0？我的意思是从编程角度来看。
从理论上讲，似乎相同的算法将应用于两种类型的居中。
问题答案：
这是一个很好的问题，我不知道，但是我怀疑问题的根源在于HTML，因此它的渲染引擎最初旨在用于文档语义，而不是布局/打印语义。CSS非常擅长描述段落，标题和各种文档问题，而在涉及更大的DTP布局任务（每个人现在都希望其网站成为现实）时，CSS确实很弱。
简而言之：我认为问题在于HTML正在执行原本不打算用于的任务。令人惊讶。
-
问题内容： 我在浮动div中有一个img，但我不知道如何垂直居中。 垂直对齐：当然中间不起作用。 问题答案： 要在父元素中垂直对齐文本，并谨记的是一个内联元素等行为 类似 文本，你可以简单地设置到父元素： 。
-
问题内容： 我有一个div（#wrapper），其中包含2个并排站立的div。 我希望将右div垂直对齐。我在主包装器上尝试了vertical-align：middle，但是它不起作用。它让我发疯！ 希望有人能帮忙。 HTML： CSS： 问题答案： 您没有浮点元素的运气。他们不服从垂直对齐， 您需要的是： 请小心，因为它将元素之间的空白解释为真实的空白。它不会像对待它那样忽略它。 我建议这样做：
-
垂直对齐 1. grid-template-areas 属性值保持换行，并使用空格保持每列垂直对齐。 例如： .foo { grid-template-areas: "header header" "nav main" "footer ...."; } 2. grid、grid-template
-
问题内容： 遇到了一个奇怪的CSS问题。有人可以解释为什么包含内容的框未垂直对齐吗？ 如果您将文本放在class的范围内-它将正确对齐。 问题答案： 默认值是其 将框的基线与父框的基线对齐 注意：您可以通过添加到选择器中来查看此默认值。由于是默认设置，因此对齐方式保持不变。 您需要对其进行更改以使块在顶部对齐，例如： 基准定义为 大多数字母“坐着”且下级延伸到其下的线 解决 为什么 添加文本似乎可
-
水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。 设置到元素的宽度将防止它溢出到容器的边缘。 元素通过指定宽度，并将两边的空外边距平均分配： div 元素是居中的 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 注意:
-
在CSS中，行框的高度总是足以容纳它包含的所有行内级框，当一个行内级框 B 的高度小于包含它的行框高度时，则由 vertical-align属性 来决定B在行框中垂直对齐的位置。因此，vertical-align属性只对行内级元素有效，对块级元素无效。并且，该属性不能被子元素继承。 在垂直对齐时，行内非替换元素的行内级框是由 line-height 的高度定义的框，即在内容区的上下各添加半行距后的