margin: 0 auto 实现水平居中需满足三条件：元素为块级、显式设置宽度（或max-width）、父容器非flex/grid布局；text-align: center仅作用于行内内容，对块级子元素无效。
块级元素用 margin: 0 auto 但必须定宽
如果你的元素是 div、section 这类块级元素，又希望它在左右留白固定（比如各留 20px），同时自身水平居中，核心是：**留白由父容器控制，居中由子元素自身控制**。
常见错误是把留白和居中混在同一个元素上写，比如：margin: 0 20px —— 这会让元素左右各缩进 20px，但不会居中，它只是“靠左偏移后占满剩余宽度”。
- 正确做法：父容器不设 padding/margin 留白，而是给子元素设固定宽度 +
margin: 0 auto - 再额外加一层 wrapper 控制左右留白，例如：
<div style="padding: 0 20px"><div style="width: 800px; margin: 0 auto">内容</div></div> - 如果父容器本身宽度不确定（如响应式布局），用
max-width替代width更安全，比如max-width: 800px; margin: 0 auto;
text-align: center 只对行内内容生效，别乱套在块上
看到“两端留白+居中”，有人会下意识给父容器加 text-align: center。这只能让里面的文字、img、span 居中，对内部的 div 没用——除非你把它改成 display: inline-block。
但这样会引入新问题：inline-block 元素默认有空白符间距，且换行会折行；如果父容器宽度不够，它还会被挤到下一行。
- 真要用这个方案，得同步清空空白符或设
font-size: 0在父容器，子元素再恢复字体大小 - 更稳妥的做法仍是让子元素自己定宽 +
margin: 0 auto，不依赖文本对齐逻辑 -
text-align: center的作用对象永远是它的直接行内级子内容，不是子块元素
Flex 布局下用 justify-content: center 配合 padding 控制留白
现代项目首选 Flex：父容器设 display: flex 和 justify-content: center，子元素自动水平居中，完全不用管宽高。
两端留白就交给父容器的 padding——比如 padding: 0 20px，它会在 flex 容器左右各留 20px 空隙，子元素仍在中间。
- 注意：此时子元素的
margin: 0 auto无效，flex 会忽略它 - 如果子元素是多个，
justify-content: center会让它们整体居中，不是每个单独居中 - IE10–11 对
justify-content有渲染 bug，若需兼容，改用display: -ms-flexbox并测试实际效果
绝对定位 + transform 适合脱离文档流的场景
当元素已设 position: absolute 或 fixed，又需要“在视口或某容器内两端留白且居中”，就不能靠 margin: 0 auto 了——它只对普通流元素有效。
标准解法是：left: 50% + transform: translateX(-50%)，再用父容器的 padding 或自身 left/right 控制留白范围。
- 关键前提：父容器必须有
position: relative（或absolute/fixed），否则left: 50%会相对于视口计算 - 想实现“距左边缘 20px、距右边缘 20px、内容居中”，不如直接用
left: 20px; right: 20px;，再配合margin: 0 auto（前提是元素没脱离文档流） - 真正需要
transform的，是那种宽高动态、无法预知的弹窗或提示框
最易被忽略的一点：所谓“两端留白固定”，其实隐含了“留白是否参与响应式断点”的判断。用 padding 实现的留白会随容器缩放，用 margin 写死的像素值则不会。选哪种，得看设计稿里那 20px 是设计规范值，还是适配不同屏幕的弹性值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
