text-align: center仅对块级元素及内联内容生效，不能居中内联元素自身；居中内联元素需设display: inline-block或block，或用flex布局的justify-content。
text-align: center 只对块级元素和内联内容生效
直接给 <div> 或 <p> 加 text-align: center 能居中文本，但对 <span>、<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>）也有效，但表格有自己的一套对齐逻辑，优先级略高
margin: 0 auto 不适用于内联元素和无宽块元素
这是最常被误用的居中方式。它只对设置了明确宽度（width）的块级元素生效，且必须是“块流中的常规流元素”。<div> 默认块级，但没设 width 时会占满父容器，margin: 0 auto 就没空间可缩，自然不居中。
使用场景：固定宽度的导航栏、卡片容器、登录框等需要严格控制尺寸的组件。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须显式设置
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> 加 vertical-align: middle 完全无效。
典型使用场景：表单里 <input> 和旁边文字对齐、<img> 和文字在同一行时底部对齐、<td> 内容垂直居中。
- 只对
display: table-cell、display: inline、display: inline-block、display: inline-table生效 - 在
<td>上直接写vertical-align: middle是合法且常用的 - 想让一个块级元素在父容器中垂直居中，别碰
vertical-align，老实用 flex 或 grid
