CSS文本水平居中技巧全解析

• 想居中块级元素？用 margin: 0 auto（需有明确宽度）或 display: flex; justify-content: center
• 想居中文本+图片混合内容？text-align 没问题；但图片默认是基线对齐，可能看起来“偏下”，可加 vertical-align: middle
• 多行文本用 text-align: justify 时，最后一行默认左对齐，如需拉伸可用 text-align-last: justify（注意 Safari 支持较晚）

text-align 在 flex 或 grid 容器里被忽略

一旦父元素设了 display: flex 或 display: grid，text-align 就失效了——因为对齐逻辑已交给 justify-content、align-items 等属性接管。

• 常见误操作：给 flex 容器同时写 text-align: center 和 justify-content: center，前者纯属冗余
• 例外：如果 flex 项目内部还有文字，那项目自身的 text-align 仍对其内部文字有效
• 表格布局（display: table-cell）仍尊重 text-align，这点和 flex 不同

RTL 语言和 text-align 的隐含影响

text-align: start 和 text-align: end 是比 left/right 更健壮的选择，尤其面对阿拉伯语、希伯来语等从右向左书写的语言时。

• start 始终指向当前书写方向的起始侧（LTR 是左，RTL 是右）
• 用 left/right 在 RTL 页面中容易导致意外翻转，比如导航栏按钮顺序错乱
• 现代框架（如 Bootstrap 5+）已倾向用 text-start / text-end 类替代 text-left / text-right

真正容易被忽略的是：当父元素用了 direction: rtl，即使你写了 text-align: left，它也会表现成“右对齐”——因为 left 是相对于书写方向而言的，不是绝对屏幕方向。调试时别只盯 CSS，顺手检查 direction 和 unicode-bidi。

到这里，我们也就讲完了《CSS文本水平居中技巧全解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！