text-align: center仅使块级容器内的行内内容（文字、图片等）水平居中，不控制块级子元素自身位置；需居中容器本身时应配合margin: 0 auto或Flex布局。
直接用 text-align: center 就能解决绝大多数文字居中需求，不需要 flex、grid 或绝对定位——除非你要居中的不是“文字本身”，而是“整个容器”或“多行块级内容”。
只让段落/标题里的文字水平居中
这是最常见也最轻量的场景：比如一个 <p></p>、<h1></h1> 或带文字的 <div>，你只想让里面的内容左右居中。
<ul>
<li>
<code>text-align 是唯一需要的 CSS 属性，作用对象是**块级容器**，影响的是它内部的行内内容（文字、图片、<span></span> 等）
.title { text-align: center; } 或内联：<h2 style="text-align:center">标题</h2>
text-align 对 <div> 里嵌套的另一个 <code><div> 没有效果——它不控制子块级元素的位置，只管“文字怎么排”
<li>响应式下依然可靠，手机端小屏也不会失效</li>
<h3>让 div 自身在页面里水平居中（不是里面文字）</h3>
<p>如果你加了 <code>text-align: center 却发现整个盒子还是靠左，说明你真正想居中的是这个 <div> 元素本身，而不是它的内容。
<ul>
<li>必须给该 <code>div 设置明确宽度（比如 width: 400px），否则 margin: 0 auto 不生效margin: 0 auto，不是 margin: auto ——前者明确设上下为 0、左右自动，后者在某些旧浏览器可能行为不一致text-align: center
text-align: center 来“凑合”居中子 div，那是错觉，且会污染其他内联内容同时水平 + 垂直居中（比如卡片标题、弹窗文字）
当容器有固定高度（如 height: 100vh 或 200px），又要求文字严格居中到正中心，text-align 就不够用了。
立即学习“前端免费学习笔记（深入）”；
- 首选
display: flex：justify-content: center控制水平，align-items: center控制垂直 - 避免用
line-height等高技巧——它只对单行有效，换行后文字会溢出或错位 - 如果容器内还有按钮、图标等其他子元素，flex 天然支持整体对齐，不用单独调每个元素
- 不要用
position: absolute+transform: translate(-50%, -50%)去“微调”，那是在掩盖结构问题，维护成本高
表格单元格里文字居中
表格是个特例：<th> 默认就 <code>text-align: center，但 <td> 默认左对齐。
<ul><li>直接对 <code><td> 或 <code><th> 加样式即可：<code><td style="text-align:center">数据</td>
align="center" 属性，HTML5 不再支持td:nth-child(2) { text-align: center; }
vertical-align 是控制单元格内内容的**上下对齐基准线**（如 top/middle/bottom），不是垂直居中整个内容块；真要垂直居中，得配合 height + line-height 或 flex最容易被忽略的一点：分清“居中谁”——是文字？是盒子？还是盒子+文字一起？选错方法会导致后期改起来特别费劲，尤其是加了响应式或动态内容之后。
