margin: auto 居中需满足：块级元素、显式设置宽度、非浮动/绝对定位；flexbox 用 display: flex + justify-content/align-items 最可靠；absolute + transform 需父容器 relative 定位并配合 translate(-50%,-50%)。
用 margin: auto 居中 div 的前提条件
它只对「有明确宽度」且「是块级元素」的 div 有效，同时该 div 必须是 display: block（默认就是），且不能是浮动或绝对定位元素。
常见错误现象：margin: auto 完全没反应，页面不动——大概率是忘了设 width，或者父容器没撑开（比如父 div 高度为 0）。
- 必须显式设置
width（如width: 300px或width: 50%） - 父容器需有明确宽度（通常浏览器窗口宽度即可，但若父
div是inline或未设width，可能失效） - 不能同时设
float、position: absolute或position: fixed
用 flexbox 实现真正可靠的居中
这是目前最主流、兼容性足够好（IE11+）、写法简洁的方式。核心是让父容器变成弹性盒子，并用两个属性控制主轴和交叉轴对齐。
使用场景：需要居中的不只是一个 div，还可能后续加按钮、文字等子元素；或者要响应式适配不同屏幕。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
display: flex、justify-content: center（水平居中）、align-items: center（垂直居中） - 子
div不需要设宽高也能居中，但设了更好控形 - 注意 IE11 对
flex有些怪异行为，比如不支持min-height: 100vh下的居中，建议父容器用height: 100vh
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
用 position: absolute + transform 的老办法
适合需要脱离文档流、或父容器无法改 display 的情况。关键点不在 top/left 的 50%，而在于用 transform: translate(-50%, -50%) 拉回来一半自身尺寸。
容易踩的坑：只写 top: 50%; left: 50%，结果右下角在中心——因为定位基准是元素左上角，不是中心点。
- 父容器必须设
position: relative（否则会相对于body定位） - 子
div设position: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%) - 不用管子元素宽高是否固定，
transform自动按实际尺寸计算偏移
为什么不用 text-align: center 或 vertical-align
text-align: center 只影响行内内容（如文字、img、inline-block 元素），对块级 div 本身无效；vertical-align 只在表格单元格或行内/表格式上下文中起作用，单独给 div 设置毫无效果。
典型错误现象：写了 text-align: center 发现 div 还是靠左；查文档发现 vertical-align 被标为「不适用于块级元素」。
- 别把
text-align当成「让所有东西居中」的万能开关 -
vertical-align在非table-cell或inline场景下，浏览器直接忽略 - 想垂直居中，优先考虑
flexbox或absolute + transform
真正麻烦的不是怎么写，而是搞清当前布局上下文：父容器有没有高度？是否已用浮动或定位？要不要兼容旧版 Safari？这些细节一错，所有居中代码都像没写一样。
