text-align: center 用于父容器内行内元素水平居中，margin: 0 auto 使有宽度的块级元素自身居中，flex 布局可一键实现水平垂直居中，绝对定位加 transform 适用于旧浏览器兼容场景。
直接用 text-align: center 就能解决大部分文本、图片等行内内容的水平居中，但别指望它让 div 自己居中——那是 margin: 0 auto 的事。
text-align: center 只对父容器生效
这个属性必须写在**包含文字或图片的父块级元素上**，不是写在文字本身。比如想让段落居中，要给 p 的父 div 加样式，而不是给 p 加。
- 错误写法：
<p style="text-align: center">文字</p>—— 这其实能生效，但语义混乱，且无法控制父容器内其他行内元素（如img）的对齐 - 正确写法：
<div style="text-align: center"><p>文字</p><img src="a.jpg"></div> - 它对
display: block子元素（比如另一个div）完全无效，哪怕那个子元素里全是文字
margin: 0 auto 要求块级元素有明确 width
想让一个 div 在页面中间“站着”，不是靠里面文字居中，而是让它自己居中。这时必须同时满足两个条件：它是块级元素（默认就是），且设置了 width（或 max-width）。
- 没设
width的div默认 100% 宽，margin: 0 auto就没效果 -
width: 80%和width: 400px都行，但width: auto不行 - 如果父容器是
display: inline-block或浮动了，可能导致父容器塌陷，margin: 0 auto也会失效
Flex 布局一行代码搞定水平+垂直居中
当你要把一段文字、一张图，甚至整个卡片，在视口里正正地摆中间，display: flex 是最省心的选择，但容易漏掉关键前提。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
display: flex; justify-content: center; align-items: center; - 父容器得有高度，否则垂直居中不生效——常见做法是加
height: 100vh，同时确保html, body { height: 100%; margin: 0; } - 子元素不需要设宽高，也不依赖
line-height，多行文字、响应式缩放都稳 - IE11 支持基本居中，但若用了
flex-wrap: wrap或min-height，可能出 bug
绝对定位 + transform 是兼容旧浏览器的兜底方案
如果你还在维护 IE9–10 的项目，或者需要弹窗类脱离文档流的居中，这个组合依然可靠，但写错一个参数就偏移。
- 父容器建议设
position: relative（非必须，但避免意外定位到body） - 子元素设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 漏掉
transform，元素左上角会跑到视口中心；写成translate(-50px, -50px)就只适合固定尺寸元素 - 不要和
margin: auto混用——绝对定位下margin: auto只在同时设了top/right/bottom/left且子元素宽高固定时才有效，实际极少用
真正容易被忽略的是：居中从来不是单一 CSS 属性的事，而是“谁对谁居中”“在什么上下文里居中”的判断。写之前先问一句：我要居中的到底是内容，还是容器本身？答案决定了该用 text-align、margin、flex 还是 position。
