text-align: center仅对块级元素及内联内容生效，不能居中内联元素自身；居中内联元素需设display: inline-block或block，或用flex布局的justify-content。
text-align: center 只对块级元素和内联内容生效
直接给 <div> 或 <code><p></p> 加 text-align: center 能居中文本，但对 <span></span>、<a></a> 这类默认内联元素本身没用——它居中的是“内部的文字”，不是这个标签自己。很多人以为加了就整个元素居中，结果发现没反应，其实是误解了作用对象。
常见错误现象：<span style="text-align: center">文字</span> 完全无效；<div style="text-align: center"><img src="x.jpg"></div> 图片却居中了（因为 <img> 是替换元素，在行内表现类似文字）。
- 真正需要居中一个内联元素自身（比如按钮、图标），得先让它变成块级或行内块：
display: inline-block或display: block - 如果父容器是 flex 布局，
text-align就完全不参与水平对齐，靠justify-content -
text-align对表格单元格（<td>）也有效，但表格有自己的一套对齐逻辑，优先级略高 <h3>margin: 0 auto 不适用于内联元素和无宽块元素</h3> <p>这是最常被误用的居中方式。它只对设置了明确宽度（<code>width）的块级元素生效，且必须是“块流中的常规流元素”。<div> 默认块级，但没设 <code>width时会占满父容器，margin: 0 auto就没空间可缩，自然不居中。使用场景：固定宽度的导航栏、卡片容器、登录框等需要严格控制尺寸的组件。
- 必须显式设置
width（或max-width），百分比、fit-content、max-content都可以，但不能是auto -
display: inline-block的元素也能用margin: 0 auto，但前提是它被包裹在text-align: center的父容器里——否则它还是左对齐 - 绝对定位元素（
position: absolute）不走常规流，margin: 0 auto失效，得用left: 50%+transform: translateX(-50%)
Flex 布局居中要小心父容器的 display 和方向
写
display: flex+justify-content: center看似简单，但实际卡在两处：父容器没设display: flex，或者子元素被float或position: absolute排出了 flex 流。性能影响很小，兼容性方面，
flex在 IE10+ 支持，但 IE10–IE11 对某些属性（如align-items: stretch）有 bug，慎用min-height: 100vh配合 flex 居中。- 父容器必须是
display: flex或display: inline-flex，仅子元素设display: flex没用 -
justify-content: center控制主轴（默认是水平），如果主轴改成了 column（flex-direction: column），它就变成垂直居中 - 子元素如果有
float: left，会脱离 flex 流，无法被justify-content影响
vertical-align 只对表格单元格和行内/行内块元素起作用
这是最容易让人崩溃的属性之一。它根本不是用来“垂直居中整个容器”的，而是调整**行内格式化上下文里多个内联级元素之间的基线对齐关系**。给
<div> 加 <code>vertical-align: middle完全无效。典型使用场景：表单里
<input>和旁边文字对齐、<img>和文字在同一行时底部对齐、<td> 内容垂直居中。 <ul> <li>只对 <code>display: table-cell、display: inline、display: inline-block、display: inline-table生效 - 必须显式设置
- 在
<td> 上直接写 <code>vertical-align: middle是合法且常用的 - 想让一个块级元素在父容器中垂直居中，别碰
vertical-align，老实用 flex 或 grid
事情说清了就结束。居中从来不是单一属性的事，关键看元素所处的上下文：是块流？行内流？表格？还是 flex/grid 容器？选错上下文，再熟的属性也白搭。
