块级元素居中需同时满足三个条件：必须为块级元素、显式设置宽度、父容器不能是flex或grid布局；否则margin: 0 auto无效。
块级元素居中不是加个 margin: 0 auto 就完事——它必须满足三个条件，缺一不可，否则就卡在左上角不动。
为什么 margin: 0 auto 不生效？
这是最常被忽略的硬性前提：浏览器只有在知道“剩余空间有多少”时，才能均分左右外边距。所以它要求：
- 目标元素必须是块级（
display: block或默认块行为，如<div>、<p>） - 必须显式声明宽度（
width或max-width），不能是100%或未设置 - 父容器不能是
display: flex或display: grid—— 这两种布局会直接覆盖margin: auto的计算逻辑
常见错误现象：<div class="box"></div> 写了 margin: 0 auto 却没动，大概率是忘了设 width，或者父容器用了 flex。
display: flex 居中时子元素为啥还是靠左？
Flex 居中作用在父容器上，但它的行为受子元素自身样式干扰极大：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 如果子元素写了
width: 100%，它会撑满父容器，justify-content: center就失去意义 - 子元素若设了
float、position: absolute或display: inline-block，它就不再是标准 Flex item，对齐可能失效 - 垂直居中必须配合
align-items: center，且父容器要有明确高度（比如height: 400px或min-height: 100vh）
正确写法示例：
.container { display: flex; justify-content: center; align-items: center; height: 300px; } .box { width: 200px; height: 100px; }
绝对定位居中滚动就偏移？
用 position: absolute + transform: translate(-50%, -50%) 确实不依赖宽高，但定位上下文错了就会漂移：
- 子元素必须设
position: absolute、top: 50%、left: 50% - 父容器必须有定位（
position: relative、absolute或fixed），否则top: 50%会相对于整个视口计算，一滚动就跑偏 - 如果父容器本身在文档流里滚动（比如
overflow-y: auto的侧边栏），那父容器也得是relative，否则子元素仍按视口定位
别漏掉这句关键样式：.parent { position: relative; }。
真正麻烦的不是方法多，而是每种方法都绑定特定前提——text-align 不管块级元素，flex 会吃掉 float 和 vertical-align，absolute 要手动管定位上下文。选错前提，代码写得再整齐也没用。
