margin: 0 auto 水平居中需满足：元素为块级、有明确 width、未设 float 或 absolute、父容器为常规流且宽度大于子元素。
块级元素水平居中：用 margin: 0 auto 需满足什么条件
直接给 margin: 0 auto 不生效，大概率是没设宽度或父容器没撑开。它只对「有明确宽度」的块级元素起作用，且该元素不能是 float 或 position: absolute 状态。
常见错误现象：div 写了 margin: 0 auto 却靠左贴边；调试时发现计算出的 margin-left 和 margin-right 都是 0px。
- 必须显式设置
width（比如width: 300px或width: fit-content） - 父容器需是常规流（
display: block），且宽度大于子元素 -
display: inline-block的块级元素不适用此法，得换思路 - 在 Flex 容器里，
margin: 0 auto依然有效，但属于“额外技巧”，不是主要手段
行内元素（含文本、img、span）怎么居中
行内元素本身不能设宽高，所以 margin: 0 auto 完全无效。正确做法是控制其父块级容器的 text-align。
使用场景：按钮文字、图标 img、带样式的 span 在卡片里居中显示。
- 父元素加
text-align: center，所有直系行内内容都会水平居中 -
img默认是行内元素，但若被设成display: block，就得按块级方案处理 - 如果父元素用了 Flex 布局，
text-align会被忽略，此时要靠justify-content: center - 注意
text-align对display: flex或display: grid子项无影响
Flex 布局下居中：justify-content vs margin auto
justify-content: center 是最常用也最可靠的方案，但它只对 Flex 容器的直接子项生效。而 margin: auto 在 Flex 里可以单独作用于某个子项——这是个容易被忽略的差异。
性能影响几乎为零，兼容性从 Chrome 29 / Firefox 20 / Safari 9 开始都支持，IE10+ 需加 -ms- 前缀（但 IE10 的 margin: auto 居中不完全可靠）。
- 容器设
display: flex后，子项加margin: 0 auto会强制居中，无视justify-content设置 -
justify-content: center居中的是所有子项整体，margin: auto居中的是单个子项（适合混排场景） - 若子项是
flex: 1，再加margin: auto会失效——因为已占满剩余空间 - 不要对多个子项同时设
margin: auto，它们会互相挤压，结果不可控
Grid 布局中居中：place-items 和 justify-self 的分工
place-items: center 是快捷写法，等价于 justify-items: center; align-items: center，但它只影响「网格项」（grid item）在单元格内的对齐，不是整个网格容器的居中。
真正让某个网格项水平居中，优先用 justify-self: center；如果想让所有项默认居中，才在容器上设 justify-items: center。
-
justify-self可以覆盖justify-items，适合个别项特殊处理 - 如果网格项设置了
grid-column: 1 / -1（横跨整行），justify-self就没效果——它只在单元格内起作用 - 和 Flex 不同，Grid 中
margin: auto也能居中，但语义模糊，建议优先用justify-self - 注意
place-items不会影响grid-template-areas的布局结构，只是调整内容对齐
实际项目里最容易卡住的，是搞不清「谁在控制谁」：是父容器的对齐属性，还是子元素自身的 margin 或 display 行为。多看一眼 computed styles 里的 margin-left/right 计算值，比猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
