本文详解如何使用 align-items: center 实现 Flex 容器内所有子项的垂直居中对齐，兼容现代浏览器及旧版 WebKit/IE，并附可直接运行的 HTML/CSS 示例。
本文详解如何使用 `align-items: center` 实现 flex 容器内所有子项的垂直居中对齐，兼容现代浏览器及旧版 webkit/ie，并附可直接运行的 html/css 示例。
在 Flexbox 布局中，当容器内子元素高度不一致（例如一个高 50px 的色块与多行短文本并排）时，文本默认会沿基线（baseline）对齐，导致视觉上“下沉”，无法与 taller 元素的中点对齐。解决这一问题的核心是控制交叉轴（cross axis）上的对齐方式——对 flex-direction: row（默认值）而言，交叉轴即为垂直方向，此时应使用 align-items 属性。
只需在 Flex 容器上设置 align-items: center，即可让所有子元素在交叉轴（垂直方向）上居中对齐。该属性作用于所有直接子元素，无需额外修饰单个子项：
.container {
display: flex;
align-items: center; /* 关键：垂直居中 */
/* 以下为兼容性前缀（仅需支持 IE10/旧 Safari 时保留） */
display: -webkit-flex;
display: -ms-flexbox;
-webkit-align-items: center;
-ms-flex-align: center;
}
配合示例结构：
<div class="container"> <div class="box"></div> <div class="text">abc</div> <div class="text">abc</div> </div>
以及基础样式：
.box {
height: 50px;
width: 25px;
background: #e74c3c;
}
.text {
padding: 5px 12px;
background: #ecf0f1;
font-size: 14px;
line-height: 1.4;
}
✅ 效果：.box 与两个 .text 元素的几何中心将严格对齐，无论其原始高度或字体大小如何变化。
⚠️ 注意事项：
- align-items 仅影响直接子元素；若需对嵌套子项单独控制，请在其父容器上设置 align-self；
- 若容器设为 flex-direction: column，则 align-items: center 将控制水平居中（此时主轴为垂直方向）；
- 现代项目中可省略 -webkit- 和 -ms- 前缀（Chrome 29+/Firefox 28+/Safari 6.1+/Edge 12+ 均原生支持标准语法），但需兼容 IE10–11 时仍需保留 -ms-flex-align；
- 避免与 vertical-align 混用——后者仅对 inline/inline-block 元素有效，在 Flex 容器中完全失效。
总结：align-items: center 是 Flexbox 垂直对齐最简洁、最可靠的方案，语义清晰、行为确定，应作为默认首选。
