答案是使用 align-items: center 可解决 Flexbox 子元素在交叉轴上无法居中问题，需根据 flex-direction 确定主轴方向后，在容器设置该属性以实现垂直或水平居中对齐。
当使用 Flexbox 布局时，如果发现子元素在交叉轴（cross axis）上无法居中，通常是因为没有正确设置容器的对齐方式。这时候可以通过 align-items: center 来解决。
理解主轴与交叉轴
在 Flex 容器中，子元素的排列方向由 flex-direction 决定：
• 如果是 row（默认），主轴是水平方向，交叉轴就是垂直方向• 如果是 column，主轴是垂直方向，交叉轴就是水平方向
交叉轴上的对齐问题，其实就是子元素在“侧向”没有居中显示，比如上下不居中或左右不居中。
使用 align-items:center 实现交叉轴居中
要让子元素在交叉轴上居中，需在父容器上设置：
立即学习“前端免费学习笔记（深入）”；
• align-items: center —— 适用于所有子元素
• 若只对个别子元素调整，可用 align-self: center
示例代码：
.container {
display: flex;
flex-direction: row; /* 主轴：水平 */
align-items: center; /* 交叉轴：垂直居中 */
}
.item {
padding: 10px;
}
此时，即使子元素高度不同，也会在容器中垂直居中对齐。
常见应用场景
• 导航栏文字与图标垂直居中• 卡片布局中内容在容器内居中
• 表单元素与标签对齐
只要子元素在侧向没对齐，优先检查 align-items 是否设置正确。
基本上就这些，用好 align-items:center 能快速解决多数交叉轴对齐问题。
