text-align: center仅作用于块级容器内的行内内容，不能使块级元素自身居中；常见失效原因包括加在行内元素上、父容器无明确宽度、子元素脱离文本流或父容器为flex/grid布局。
text-align 是控制文字水平对齐最直接的手段，但它只作用于块级容器内的行内内容——不是让盒子居中，而是让里面文字、图片、span 这类东西“站队”。用错地方，就永远看不到效果。
为什么 text-align: center 没反应？
常见错误不是写错了值，而是加错了位置：
- 给
<p></p>或<div> 自身加 <code>text-align: center才有效；给<span></span>或<strong></strong>加无效 - 父容器是
display: flex或display: grid时，text-align会被忽略（主轴对齐由justify-content控制） - 子元素用了
float、position: absolute或display: block且宽度占满，它已脱离文本流，text-align不再影响它 - 父容器没设宽度（比如
width: auto），又嵌套在弹性或网格布局里，可能因计算上下文丢失导致对齐“失效” -
left：中文段落首选，默认即此，阅读动线自然，避免justify强行拉伸造成的字间距不均 -
right：仅用于数值列（价格、日期、ID）、阿拉伯文内容，或右对齐图标按钮组 -
center：标题、章节名、宣传语可用，但正文段落慎用——易打断阅读节奏，尤其长段落 -
justify：杂志/报纸类排版可用，但中文下需配合text-justify: inter-ideograph（仅部分浏览器支持），否则末行突兀、字距崩坏 - Flex 布局：
display: flex+justify-content: center，父容器需有明确高度或内容撑开，否则子项可能“看不见” - 兼容老 iOS Safari（
iOS 9.3之前）：避免单行 flex 容器里混用img和vertical-align，加align-items: flex-start显式重置
text-align 的四个常用值怎么选
中文排版中，别默认套用英文习惯：
想让整个 div 居中，别只靠 text-align
这是最常混淆的点：text-align 管不了块级元素自身的位置。要让一个 <div class="card"> 在页面中水平居中，得换方案：
<ul>
<li>传统方式：<code>margin: 0 auto，但必须同时设 width（不能是 100% 或 fit-content 无前缀）
真正难的不是写哪行代码，而是分清你要对齐的是“文字内容”，还是“元素盒子本身”——这两个问题，CSS 用完全不同的机制解决，混在一起，调试成本翻倍。
