text-align: center 不会让 div 自身居中，仅使内部文字、span、img（行内时）水平居中；让块级元素居中须用 margin: 0 auto（需设宽度）、flex 或 grid。
text-align: center 不会让 div 自己居中，只让里面文字、span、img（当它们是行内元素时）水平居中；真想让块级元素居中，得用 margin: 0 auto、flex 或 grid。
text-align 只作用于行内内容，不是“让盒子挪位置”
这是最常踩的坑：给一个 div 加了 text-align: center，发现里面的文字居中了，但 div 本身还是贴左——因为 text-align 根本不控制块级子元素的位置。
- 它只影响块容器内部的**行内流内容**：文字、
span、未设置display: block的img、button文字等 - 对
div、section、ul这类块级子元素完全无效 - 如果想让子
div居中，必须在父容器上用display: flex或给子div加margin: 0 auto - 错误写法：
.parent { text-align: center; } .child { display: block; }→.child不动
margin: 0 auto 要生效，必须满足两个硬条件
margin: 0 auto 看似简单，但失效频率极高，核心原因是浏览器无法计算左右 margin 的分配空间。
- 子元素必须有**明确的宽度**：不能是
width: 100%，也不能是未设宽度的width: auto（此时宽度由内容撑开） - 推荐写法：
width: 320px、max-width: 80%、width: fit-content（注意 Safari 15.4 前需加-webkit-fit-content） - 父容器不能是
display: inline-block或设置了float、position: absolute - 常见失效现象：Chrome 正常，微信内置浏览器或旧版 Safari 中仍左贴边 → 很可能是宽度没设对，或用了
fit-content但没加前缀
Flex 布局居中更可靠，但老 iOS Safari 有基线偏移问题
现代项目首选 display: flex，但若需兼容 iOS 9.3 之前的设备（如部分教育/政务终端），得防一手。
- 基础写法：
.parent { display: flex; justify-content: center; } - 隐患点：当子元素是图片、带
vertical-align的span或内联按钮时，iOS 9.3 之前 Safari 会按基线（baseline）对齐，导致视觉上“偏高” - 稳妥解法：加
align-items: flex-start显式关闭交叉轴默认行为 - 替代方案（兼容性更强但语义弱）：
display: table-cell; text-align: center; vertical-align: middle;，但仅适用于单层居中且父容器高度固定
vertical-align 容易被误用，只对三类元素生效
vertical-align 不是万能垂直居中工具，它只在特定上下文中起作用，滥用会导致完全没反应。
- 只对
display值为inline、inline-block、table-cell的元素有效 - 对
div（默认block）、flex子项、grid子项完全无效 - 常见误用：
div { vertical-align: middle; }→ 零效果 - 正确场景举例：图文混排时让图标和文字垂直居中对齐：
img { display: inline-block; vertical-align: middle; } - 表格单元格中：
td { vertical-align: top; }有效，但若td内部又嵌套了div，则该div不受此影响
真正难的不是记住哪条规则，而是遇到居中失效时，第一反应不是“再加一层 text-align”，而是立刻检查：目标元素的 display 类型、父容器的布局模式、是否满足 margin: 0 auto 的宽度前提、以及手头设备的 Safari 版本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
