用 display: flex 最省心，但父容器得设高
现代布局里，display: flex 是最直接的解法，前提是父容器有明确高度（比如 height: 100vh 或固定像素值），否则子 div 垂直居中会“失效”——它其实居中了，但父容器自身高度塌缩，视觉上没效果。
实操建议：
- 给父容器加
display: flex、justify-content: center（水平）、align-items: center（垂直） - 确保父容器有高度：不能依赖内容撑开，得显式设置
height或min-height - 如果父容器是
body或html，记得先清掉默认margin，不然可能有白边
position: absolute + transform 兼容老浏览器
IE10+ 都支持，比 flex 兼容范围更广。核心是把子元素绝对定位到父容器四边中心，再用 transform: translate(-50%, -50%) 回拉自身宽高的一半。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
position: relative→ 子元素会相对于body定位，跑偏 - 忘了写
transform→ 元素左上角顶在父容器中心，不是整体居中 - 父容器没设宽高，或子元素宽高不固定 →
translate仍生效，但视觉容易误判
示例关键代码：
parent { position: relative; height: 400px; }<br>child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
别碰 margin: auto + position: absolute 这个组合
很多人试过 top: 0; bottom: 0; left: 0; right: 0; margin: auto;，以为能居中。它确实能在某些条件下工作，但极其脆弱：
- 必须同时指定子元素的
width和height（不能是auto或max-content） - 父容器得是
position: relative或非static - 在 Flex 或 Grid 父容器里完全不生效
- Firefox 对
margin: auto在绝对定位中的行为曾有兼容差异，现在虽统一，但没必要赌
Grid 布局一行搞定，但得确认项目环境
display: grid 是最简洁的方案：place-items: center 直接水平垂直居中，连 justify-content 和 align-items 都不用拆开写。
使用场景和限制：
- 适合现代项目（Chrome 60+/Firefox 63+/Safari 10.1+），但 IE 完全不支持
- 父容器不需要显式设高，只要内容或最小尺寸能体现出来就行
- 如果父容器本身是 Grid 容器且已有其他子项，
place-items会影响全部子项，注意作用域
一句话代码：
.parent { display: grid; place-items: center; }
实际用哪个，取决于你能不能控制父容器高度、要不要兼容 IE、以及团队对 CSS 新特性的接受度。最常被忽略的是：**父容器的高度来源，往往比居中写法本身更关键**。 
