最稳方案是display: flex，父容器设display: flex; justify-content: center; align-items: center;并确保父容器有明确高度（如min-height: 100vh），子元素无需宽高或margin。
用 display: flex 最稳，父容器加三行就行
只要父容器不是 或有特殊定位限制，display: flex 是目前最可靠、浏览器兼容性最好的居中方式。它同时处理水平和垂直居中，不依赖子元素宽高。
常见错误是只写 justify-content: center 忘了垂直方向，结果只水平居中；或者把 flex 加在 上却没设高度，导致 align-items 失效。
- 给父容器（比如
或一个包裹<div>）设置：<pre class='brush:php;toolbar:false;'>display: flex;<br>justify-content: center;<br>align-items: center;</pre> <li>如果父容器是 <code>，必须加上min-height: 100vh，否则高度塌陷，垂直居中无效 - 子
<div> 不需要设 <code>margin: auto，也不用指定宽高——它会按自身内容渲染，居中依然成立用
position: absolute+transform适合已知宽高的场景当你要居中的
<div> 宽高固定（比如弹窗、logo），且父容器已设 <code>position: relative，这个方案更精准，也兼容到 IE9+。容易踩的坑是：只写
top: 50%; left: 50%，结果右下角顶在中心——因为这是把左上角锚点移到中心，不是整个元素居中。立即学习“前端免费学习笔记（深入）”；
- 父容器需有
position: relative（或absolute/fixed）作为定位上下文 - 子元素写：
position: absolute;<br>top: 50%;<br>left: 50%;<br>transform: translate(-50%, -50%);
- 如果子元素宽高不固定，
transform仍有效；但若要支持 IE8，得换margin负值（需提前知道宽高）
margin: auto只对块级元素在**有宽度**时水平居中有效很多人试过
margin: auto发现没反应，原因就两个：没设宽度，或父容器是且没设text-align: center（后者只影响内联元素）。它本质是让左右外边距“均分剩余空间”，所以必须留出可分配的空间——也就是元素不能占满父容器宽度。
- 子
<div> 必须显式设置 <code>width（比如width: 300px或width: 80%） - 只需写
margin: 0 auto，不用管top或height——它不管垂直方向 - 如果想连带垂直居中，得配合父容器
display: table-cell+vertical-align: middle，但语义混乱、响应式差，不推荐
别碰
text-align: center居中块级元素text-align: center只作用于**内联内容**（文字、<img alt="index.html中如何居中一个div？" >、<span></span>等），对块级<div> 本身无效。有人把它加在父容器上，再把子 <code><div> 设成 <code>display: inline-block，看似可行，但会引入空白符问题、基线对齐干扰，还破坏文档流。除非你真在做按钮组或导航栏这类内联布局，否则绕开它。现代项目里，
flex或absolute + transform都比它干净得多。真正难的不是选哪种方法，而是判断父容器有没有 padding、border、滚动条干扰，以及是否要兼容老浏览器——这些细节一动，居中就偏移。动手前先用浏览器开发者工具看一眼盒模型，比查十篇教程都管用。
- 父容器需有
