为什么在CSS中垂直居中并不容易？

Question

我正在寻找一种方法来将容器中的div垂直居中.我发现了一些不同的方法,但所有这些方式似乎都非常"hacky".

我的问题是,为什么不只是一个css属性,例如align-vertical可以简单地设置为center使内容居中？似乎将此添加到css会使这么多事情变得更容易.

我假设必须有一个理由为什么没有实现这样的东西,我想听听是否有人知道为什么.

Answer 1

这是因为浏览器传统上如何工作.

在浏览器中,默认情况下,内容垂直滚动.视口宽度定义良好(设备的宽度),但视口高度可以是设备高度的一倍或两倍,甚至可以是无限的(如无限滚动).

传统上,块意味着水平定向.你把一个div和它的自动占据100%的width母公司.但它的height价值与其内容有关.

如果你这样做

.mydiv {
  background: red;
  width: 100%;
  height: 100%
}

没有任何变化,因为div已经有100%的宽度,并且它无法计算高度,因为它不知道视口将走多远.你需要添加:

html, body {
  height: 100%;
}

告诉浏览器使用设备高度作为100%值.

这就是为什么水平中心很容易:你知道边界是什么,以及如何使元素居中.但垂直中心更复杂,这就是为什么(在flexbox之前),你需要求助于绝对定位或黑客攻击.

Flexbox允许您水平或垂直渲染内容,因此它准备好处理沿两个轴的居中.

如果你想了解更多关于这一点,我建议规范: