text-align: center、margin: 0 auto、justify-content: center 是css水平居中最常用的三种方法，分别适用于行内元素（需作用于父元素）、有宽度的块级元素、以及display: flex容器内的子元素，匹配错误则失效。
直接说结论：text-align: center、margin: 0 auto、justify-content: center 这三个选择器组合最常用，但必须匹配元素类型和上下文，错配就失效。
行内元素用 text-align: center，但必须作用在父元素上
这是最轻量的方案，适用于 span、img、a 等默认 inline 的元素，也兼容 display: inline-block 的 div。
- 错误写法：
.child { text-align: center }—— 对自身无效，text-align不控制自身位置，只影响子内容对齐 - 正确写法：
.parent { text-align: center }，且确保子元素没脱离文档流（比如没设float或position: absolute） - 常见坑：父元素宽度没撑开（例如
div没设width或内容太短），导致“居中”视觉上不明显
块级元素用 margin: 0 auto，但必须显式设置宽度
这是传统方案，对 div、p、section 等默认 block 元素有效，但依赖宽度约束。
- 失效典型：
.child { margin: 0 auto }却没写width—— 浏览器会按 100% 宽度渲染，左右 margin 自动为 0 - 可接受的宽度值：
width: 200px、width: 50%、max-width: 400px（只要不是auto） - 注意冲突：
float、position: absolute或display: flex会让margin: 0 auto完全失效
Flex 布局用 justify-content: center，但父容器必须是 display: flex
这是现代项目首选，不依赖子元素宽高，也不挑元素类型（inline、block、甚至绝对定位子元素都能居中）。
- 关键前提：
.parent { display: flex }缺一不可，只写justify-content没用 - 单方向居中够用：
justify-content: center（水平）、align-items: center（垂直），两者合起来就是水平垂直居中 - 兼容性提醒：IE10–11 需加
-ms-前缀，如-ms-justify-content: center；IE9 及以下不支持，得 fallback
place-items: center 在 Grid 中更简洁，但别和 Flex 混用
如果父容器已用 display: grid，一行 place-items: center 就能同时搞定水平和垂直居中，比 Flex 少写一个属性。
- 不能写在 Flex 容器上：
display: flex+place-items无效，CSS 不识别该组合 - 注意浏览器支持：Firefox 63+、Chrome 71+、Safari 14.1+ 支持，旧版 Safari 需拆成
justify-items: center+align-items: center - 真实场景限制：Grid 布局本身有行列定义逻辑，若只是单纯居中，用 Flex 更轻量；Grid 适合需要二维结构的场景
真正容易被忽略的是参照物问题——所有这些选择器都只相对于**直接父容器**生效。如果中间有 position: relative 或 transform 的祖先，可能改变包含块，导致居中偏移。动手前先确认父级是否干净、是否有意外的定位或缩放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
