90%的居中问题用flex+justify-content和align-items可解决；margin:0 auto不生效主因是元素无明确宽度、非块级、父容器为flex/grid、元素浮动或绝对定位。
直接说结论：90% 的居中问题，用 display: flex + justify-content 和 align-items 就能干净解决；剩下 10%，看是否要兼容老浏览器、是否需脱离文档流、或是否连宽高都未知——这时候才轮到 position: absolute + transform 或 place-items。
块级元素水平居中为什么加了 margin: 0 auto 还不生效？
这是新手最常卡住的地方：写了 margin: 0 auto，元素却死死贴左。根本原因不是 CSS 写错了，而是它根本不满足生效前提。
-
margin: 0 auto只对「有明确宽度」的块级元素起作用——width或max-width必须显式设置（比如width: 600px或max-width: 80%） - 元素不能是
display: inline或inline-block（除非父容器同时设了text-align: center） - 父容器不能是
display: table-cell或display: grid等会干扰外边距计算的上下文 - 如果用了
float，margin: auto会彻底失效
典型错误写法：.box { margin: 0 auto; } —— 没 width，浏览器无从算左右空多少，auto 就等于没写。
Flex 布局居中：为什么推荐用 justify-content 而不是 text-align？
text-align: center 看似简单，但它只影响行内内容（文字、img、span），对 div、section 这类块级子元素完全无效。而 display: flex 是真正“作用于布局”的方案。
- 父容器加
display: flex后，所有直系子元素自动变成 flex item，不再受文档流默认行为干扰 -
justify-content: center控制主轴（默认为水平）居中，align-items: center控制交叉轴（默认为垂直）居中，两者组合就是二维居中 - 不需要知道子元素宽高——哪怕子元素是
width: fit-content或动态生成的，照样居中 - 注意：父容器必须有高度才能让
align-items: center在垂直方向生效（比如min-height: 100vh或固定height）
示例：.container { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
未知宽高的弹窗/提示框怎么精准居中？
当元素宽高都不固定（比如根据内容撑开的 tooltip、动态加载的 modal），又必须脱离文档流时，margin: auto 和纯 flex 都可能受限。这时 position: absolute + transform 是最可靠的选择。
- 父容器设
position: relative（或position: fixed如果要相对于视口） - 子元素设
position: absolute; top: 50%; left: 50%—— 此时定位点是元素左上角 - 关键一步：
transform: translate(-50%, -50%)把自身向左上各挪动「自身宽高的一半」，实现真·中心对齐 - 这个方案不依赖子元素尺寸，也不吃父容器宽度，兼容 IE9+，比老式「负 margin」方案（需预知宽高）健壮得多
注意：别漏掉 transform，否则元素只会左上角顶在中心点，看起来像偏右下。
Grid 的 place-items: center 真的够用吗？
够用，而且更简洁——但要注意它的适用边界。它本质是 justify-items: center + align-items: center 的缩写，只对 grid container 的 direct children 生效。
- 适合已确定用 Grid 做整体布局的场景（比如仪表盘、卡片网格），一行代码搞定二维居中
- 不适用于只想居中某个孤立元素、其他部分仍走普通流的混合布局
- 兼容性比 Flex 稍弱：Firefox 52+、Chrome 57+、Safari 10.1+ 支持，IE 完全不支持
- 如果父容器是
display: grid但子元素用了grid-column: span 2等复杂轨道定义，place-items可能被覆盖，优先级不如显式justify-self/align-self
一句话：现代项目大胆用；要保 IE10/11，退回 Flex；只居中一个元素，别为了它把整个父容器改成 Grid。
真正容易被忽略的是「居中目标到底是谁」——是文本？是图片？是带 padding 的 div？还是嵌套三层后的孙子节点？不同层级的盒模型行为完全不同。动手前先用浏览器 DevTools 检查 computed styles，确认你写的样式确实落在了目标元素上，而不是被继承、被重置、或压根没匹配到选择器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
