margin: 0 auto 实现水平居中需同时满足三条件：块级元素、明确宽度、处于常规文档流；父容器不能是 flex/grid，行内元素须先转为 block 或用 text-align:center 配合 inline-block。
用 margin: 0 auto 实现块级元素水平居中
这是最常用也最可靠的方式，但只对设置了明确 width 的块级元素生效。浏览器需要知道“剩余空间怎么分”，所以不设宽会失效。
- 必须是块级元素（如
div、section），行内元素要先加display: block -
margin-left和margin-right都设为auto，等价于写margin: 0 auto - 父容器不能是
text-align: center混用——那只是让行内内容居中，不是布局居中 - 示例：
<div style="width: 300px; margin: 0 auto;">我居中了</div>
Flexbox 居中：父容器一句声明搞定
现代布局首选，兼容性已覆盖所有主流浏览器（Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+）。关键在父容器设置 display: flex，子元素自动居中无需额外样式。
- 父元素加
display: flex+justify-content: center即可水平居中 - 如果还想垂直居中，再加
align-items: center - 注意：子元素的
margin: auto在 Flex 容器里仍有效，且能同时影响水平和垂直方向 - 示例：
<div style="display: flex; justify-content: center;"><div>我也居中了</div></div>
text-align: center 只对行内内容起作用
很多人误以为它能让任意元素居中，其实它只控制**行内内容在行框内的对齐方式**。对块级子元素无效，除非子元素是 inline 或 inline-block。
- 适用于居中文字、
img、span、button等默认行内元素 - 若想用它居中一个
div，得先让它变成行内块：display: inline-block - 缺点：会受父容器换行影响，且无法精确控制块级布局流
- 错误写法：
<div style="text-align: center"><div>这个 div 不会居中</div></div> - 正确写法：
<div style="text-align: center"><div style="display: inline-block">这样才居中</div></div>
绝对定位 + transform 的居中陷阱
这种写法常见于模态框或弹层，但它脱离文档流，容易引发重叠、响应式错位、滚动条异常等问题，不建议作为常规居中手段。
- 核心写法：
position: absolute; left: 50%; transform: translateX(-50%) - 必须给父容器加
position: relative，否则会相对于 viewport 定位 -
transform是关键——不用它的话，left: 50%只是把左边缘移到中间，元素本身还偏右 - 移动端要注意
transform在旧 Android WebView 中可能有渲染抖动 - 示例：
<div style="position: relative; height: 200px;"><div style="position: absolute; left: 50%; transform: translateX(-50%); width: 200px;">小心用</div></div>
margin: 0 auto 和 flex 覆盖 95% 的场景；text-align 适合纯文本或图标按钮；absolute + transform 留给需要脱离流的特殊组件。别为了“居中”而忽略语义和可维护性。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
