flex布局是现代项目最稳妥的居中方案，只需三行代码：display: flex、justify-content: center、align-items: center；兼容主流浏览器，不依赖子元素尺寸，且父容器需有明确高度。
现代项目里，display: flex + justify-content + align-items 是最稳妥的方案，兼容性覆盖所有主流浏览器（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+），且不依赖子元素宽高是否固定。
flex 实现居中：三行代码搞定
只需在父容器上设置三行 CSS，子元素自动水平垂直居中：
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* 父容器必须有高度，否则垂直居中不可见 */
}
- 子元素可以是
width: auto、height: auto、百分比、甚至内容撑开，全部适配 - 无需设置
position、transform或负 margin，避免脱离文档流带来的布局干扰 - 如果父容器本身是响应式高度（比如
min-height: 100vh），该方案依然可靠 - 注意：IE10–IE11 需要加
-ms-前缀（-ms-flex-pack: center/-ms-flex-align: center），但 IE 已于 2022 年 6 月终止支持，新项目可忽略
Grid 方案：更简洁，但需留意兼容边界
如果你的项目已全面采用 CSS Grid，place-items: center 是一行写法的终极替代：
.parent {
display: grid;
place-items: center;
height: 300px;
}
-
place-items是align-items和justify-items的简写，语义明确 - 它对子元素宽高完全无要求，连
display: contents子项也能居中 - 兼容性略低于 Flex：Safari 10.1+ 才开始支持
place-items，旧版 Safari（如 iOS 10）需回退到align-items: center; justify-content: center（Grid 下这两个属性也有效） - 若父容器同时启用了
grid-template-areas或复杂轨道定义，place-items可能被隐式覆盖，建议显式检查计算样式
绝对定位 + transform：唯一适合老项目兜底的方案
当必须支持 IE9 或某些嵌入式 WebView（如 Android 4.4 WebKit）时，只能退回此方案：
.parent { position: relative; height: 300px; }
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 子元素宽高可以是
auto，这是它比margin: auto+top/left/bottom/right: 0更通用的关键 -
transform的百分比值是相对于自身尺寸计算的，两个-50%含义清晰：向左/上移动自己宽高的一半 - IE9 支持
transform，但需要-ms-transform前缀；iOS 8–9.2 的 Safari 需加-webkit-transform - 容易踩坑：父容器若设置了
overflow: hidden，且子元素在 transform 后部分溢出，会被裁剪——这不是 bug，是规范行为
真正容易被忽略的是父容器的高度来源。很多开发者写了 justify-content: center 却没给父容器设 height 或 min-height，结果只看到水平居中、垂直完全失效。记住：Flex 和 Grid 的垂直居中，永远依赖父容器在交叉轴（cross axis）上有明确尺寸。这个点比选哪种方案更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
