为何CSS未提供类似align-vertical的便捷垂直居中属性？

这个疑问我刚入行的时候也有过——早期做垂直居中要么靠line-height（只适用于单行文本），要么用position: absolute加transform: translate(-50%, -50%)，甚至还有用display: table-cell的，感觉全是歪门邪道，为啥就不能像水平居中的text-align: center一样，给个直接的垂直居中属性呢？

后来了解了CSS的设计历史和布局模型，才明白这里面的原因：

• 布局模型的演进逻辑
  早期CSS是为「文档流」设计的——网页主要是文字内容，从上到下流式排列，垂直方向的布局需求远不如水平方向高频。所以优先做了text-align这类针对水平排版的属性，而垂直居中只能通过现有属性（比如padding、line-height）间接实现。

  等到复杂布局需求爆发后，CSS工作组没有选择新增一个全局的align-vertical，而是推出了Flexbox和Grid这类现代布局模块。这些模块本身就内置了完整的对齐能力，比如Flex里的align-items: center，Grid里的place-items: center，其实已经实现了「一行代码搞定垂直居中」的需求，而且是在特定布局上下文里的精准控制，比全局属性更灵活。

• 避免属性冲突与混乱
  如果新增一个全局的align-vertical，会面临一个问题：不同布局上下文（文档流、Flex、Grid、绝对定位）里的垂直居中逻辑完全不同。比如行内元素的垂直对齐靠vertical-align，块级元素在Flex里的对齐靠容器属性，强行统一成一个align-vertical，反而会让属性行为变得模糊，增加开发者的理解成本，甚至破坏现有代码的兼容性。

• CSS的模块化设计哲学
  CSS的属性设计一直遵循「布局上下文绑定」的原则：不同的布局模式（比如Flex、Grid）有自己专属的对齐属性，这样逻辑更清晰，也更符合模块化的设计思路。单独的align-vertical会打破这种上下文依赖，导致属性在不同场景下表现不一致，反而不如现有方案直观。

其实现在要实现垂直居中已经非常简单了，举两个最常用的例子：

Flexbox实现垂直居中 #

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  /* 再加 justify-content: center 就能同时水平居中 */
}

Grid实现垂直居中 #

.container {
  display: grid;
  place-items: center; /* 一行代码同时水平+垂直居中 */
}

这些方法比早期的hack方式简洁太多，也更符合现代CSS的设计理念。所以CSS工作组没有单独推出align-vertical: center，本质上是因为现有方案已经能更好地解决问题，而且更贴合CSS的整体设计逻辑。

内容的提问来源于stack exchange，提问作者eeze