CSSflex布局文字垂直居中技巧

单行文本用 line-height 有时更轻量

如果只是单行、固定高度容器内的垂直居中，line-height 仍是零配置、无兼容性风险的选择：

Text

注意：line-height 对多行文本会拉高行距，导致整体高度失控；而 flex + align-items: center 天然支持多行，且不依赖字体度量。

• 纯图标按钮、标签、导航项等单行场景，优先考虑 line-height
• 含图标+文字、响应式换行、动态内容长度不确定时，必须用 flex
• 不要混用：同时设 line-height 和 align-items: center 可能造成意外偏移

align-items: center 在 flex-direction: column 下行为不同

当容器设了 flex-direction: column，交叉轴就变成水平方向，此时 align-items: center 控制的是**水平居中**，而非垂直。

想在 column 布局中让文字垂直居中，得配合 justify-content: center（主轴对齐）：

  
Centered vertically

容易混淆点：

• align-items 始终作用于交叉轴，和 flex-direction 强相关
• vertical centering 的实现方式取决于主轴方向：row 时靠 align-items，column 时靠 justify-content
• 检查控制台 computed styles 中的 “Cross axis” 提示，比死记规则更可靠

终于介绍完啦！小伙伴们，这篇关于《CSSflex布局文字垂直居中技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！