最可靠居中方式是margin: auto配合显式width，Flex适合现代项目水平垂直居中，text-align仅作用于行内内容，绝对定位需父容器relative且用transform避免宽度依赖。
用 margin: auto 居中块级元素最可靠
对单个固定宽度的 <div>，设置 width + margin: 0 auto 是最直接、兼容性最好的方式。它不依赖 Flex 或 Grid，IE6+ 都能正常工作。
常见错误是忘记给元素设 width —— 没有宽度的块级元素默认占满父容器，margin: auto 就失效了。
- 必须显式设置
width（如width: 600px或width: 80%） - 父容器不能是
display: inline-block或浮动元素，否则可能塌陷 - 不适用于
position: absolute元素（此时要用left: 50%+transform: translateX(-50%)）
<div style="width: 400px; margin: 0 auto;"> 这个 div 会水平居中 </div>
Flex 布局居中：一行代码搞定水平+垂直
现代项目首选 display: flex，尤其需要同时水平+垂直居中时，比传统方法简洁得多。
关键不是只写 justify-content: center，而是要配合 align-items: center 和父容器高度控制。否则在无高度的父容器里，垂直居中不会生效。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有明确高度（如
height: 100vh）或内容撑开 - 子元素默认是
flex-item，无需额外设置 - IE10+ 支持，但 IE10/11 对
flex-wrap和某些属性有 bug，纯居中场景影响不大
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> <div>完全居中</div> </div>
文本内容居中：别混淆 text-align 和 margin
text-align: center 只影响**行内内容**（文字、图片、<span> 等）在块级父容器内的水平对齐，和块级元素自身居中无关。
容易踩的坑：给一个 <p> 设 text-align: center，结果发现整个段落没居中——其实是你该给它的父容器设，而不是 <p> 自身。
-
text-align不会影响display: block子元素的位置 - 若想让
<img>在父容器中居中，可设其为display: block后再用margin: 0 auto - 垂直居中文本需结合
line-height（单行）或display: table-cell（多行，已过时）或 Flex（推荐）
绝对定位居中：适合脱离文档流的弹窗类元素
当元素需要脱离文档流（比如模态框、提示气泡），用 position: absolute 配合偏移是稳妥选择。但要注意：父容器必须设 position: relative，否则会相对于 <html> 定位。
用 left: 50% + transform: translateX(-50%) 比 margin-left: -宽度一半 更安全，因为不需要预先知道元素宽度。
- 水平居中：
left: 50%+transform: translateX(-50%) - 垂直居中：加
top: 50%+transform: translateY(-50%) - 如果 JS 动态插入元素，确保父容器已存在且有
position: relative
<div style="position: relative; height: 300px;">
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">
弹窗内容
</div>
</div>
实际项目中，margin: auto 和 Flex 是主力；文本对齐别误用 text-align 控制块位置；绝对定位看似灵活，但一不小心就脱出视口。真正难的不是写法，而是判断该用哪一种——取决于元素是否脱离流、是否需要响应式、是否要兼容老浏览器。 
