为什么CSS3不支持垂直中心(直接)？

关于CSS的一个非常常见的问题是如何垂直居中元素.CSS3能够做到这么多特效,为什么它们不包括CSS3中的垂直中心功能？

我不相信这是一个很难添加的功能,即使是初学者开发人员也可以使用Javascript来实现功能.对于不同的情况,如此多的黑客攻击很明显,仅使用CSS就可以将内容垂直放置.那么也许还有其他原因导致他们决定不将其作为标准财产？

这是因为如何使用CSS执行布局 - CSS主要是在x轴上排列项目,例如100%宽度如何按预期工作但不是100%高度.这可能是由于可能的"计算/逻辑循环"发生,因为宽度取决于高度,反之亦然,因此在计算时必须始终优先考虑一个轴.

@BoltClock的额外信息:

x轴事物与文档中文本的自然流动有关.请记住,Web最初是作为一系列页面开始的,因此HTML和CSS最初是围绕这个基本前提构建的 - 它已经发展成为一个应用程序平台,但遗产仍然存在.Flexbox是垂直居中框的CSS3方式 - 唯一的问题是跨浏览器支持,但是因为问题是关于CSS3,所以这是预期的.

类似地,在指示对齐方面,水平对齐很容易,因为元素的宽度通常是隐式或明确说明的,就像块元素如何自动具有100%的隐式宽度,除非另有说明,允许容易计算中心位置沿水平轴.

然而,这对于垂直对齐的情况不起作用,其中垂直对齐通常取决于内容的数量,长度和大小.在明确说明垂直高度的情况下,实际上可以轻松完成:

通过使用CSS flexbox方法

好的:符合标准且非常简单,感兴趣的元素的维度不必固定

糟糕的是:缺乏广泛的跨浏览器支持,但今天似乎很有希望

body {
  margin: 0;
  padding: 0;
}
.box {
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.box > .content {
  background-color: #333;
  color: #eee;
  padding: 1em 2em;
}

  
I am centered