最稳方案是 margin: 0 auto，但必须设 width；Flex 用 justify-content: center 更灵活，父容器无需固定高度；text-align: center 不适用于块级元素自身居中；绝对定位方案已过时。
用 margin: 0 auto 最稳，但必须设 width
这是兼容性最好、语义最清晰的方案，适用于绝大多数块级 div 水平居中场景。它不依赖父容器样式，也不影响内部文字对齐。
- 元素必须是块级（
div默认满足） - 必须显式声明
width（不能是auto或max-content） - 不能同时设置
float或position: absolute，否则margin: auto失效 - 父容器无需特殊处理，但若父容器是
text-align: center，不会干扰该div居中——因为text-align只作用于行内内容
示例：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
.box {
width: 300px;
height: 200px;
margin: 0 auto;
background: #eee;
}
Flex 布局用 justify-content: center，父容器要控制高度吗？
只做水平居中时，justify-content: center 不要求父容器有固定高度；但如果父容器本身高度塌缩（比如空或仅含浮动子元素），视觉上就看不到居中效果——不是居中失败，而是容器“没地方可居”。
- 只需在父容器上写
display: flex和justify-content: center - 子
div不需要设width，flex 会按内容自然排布 - 如果父容器是
body，记得先清掉默认margin: 8px，否则会有白边 - 多个子
div会并排居中，如需堆叠，加flex-direction: column
示例：
立即学习“前端免费学习笔记（深入）”；
.parent {
display: flex;
justify-content: center;
}
.box {
width: 300px;
height: 200px;
background: #eee;
}
别误用 text-align: center 给 div 居中
text-align: center 从来不是用来让块级元素自身居中的。它只控制子元素中**行内内容**（如文字、img、span）在当前容器宽度内的对齐方式。
- 如果你给父
div设了text-align: center，而子div是块级且没设width，它仍会撑满父容器，看起来“没动” - 如果你给子
div自己设text-align: center，那只是让里面的文字居中，div位置完全不变 - 历史上有人用废弃的
<center>标签，现在必须避免
绝对定位配 left: 50% + margin-left: -宽的一半 已过时
这种写法需要你提前知道子元素精确宽度，且一旦改宽就得同步改 margin-left，维护成本高，响应式下基本不可用。
- 现代替代方案是
transform: translateX(-50%)，它不依赖具体像素值 - 但注意：这个组合（
position: absolute+left: 50%+transform）要求父容器有position: relative，否则会相对于body定位 - 如果只是为了水平居中，没必要引入定位上下文，徒增复杂度
真正容易被忽略的点是：**所有居中方案都受父容器尺寸约束，而父容器的高度/宽度来源，往往比居中写法本身更关键**。
