最可靠方案是 display: flex 配合 justify-content: center 和 align-items: center，代码最少、语义清晰、兼容 IE10+，无需额外 DOM 或冗余样式，子元素宽高未知也适用。
直接用 display: flex 配合 justify-content: center 和 align-items: center，是当前最可靠、代码最少、语义最清晰的方案。其他方法要么有兼容性硬伤，要么需要额外 DOM 或冗余样式。
flex 布局：父容器设为 flex，两行声明搞定
这是目前生产环境首选。只要父容器能设为 display: flex，子元素无论文字、图片、SVG 还是动态渲染的卡片，都不用管它宽高是否已知。
-
justify-content: center控制主轴（默认水平）居中 -
align-items: center控制交叉轴（默认垂直）居中 - 无需设置子元素
position、transform或额外 wrapper - IE10+ 支持（加
-ms-前缀可覆盖 IE10/11；IE9 及以下不支持）
示例：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* 父容器需有高度（或能撑开） */
}
.child {
/* 宽高完全未知，甚至可能为空或异步加载 */
}
absolute + transform：兼容老版本 Chrome/Firefox，但 IE9 是底线
当必须支持 IE9（比如政企内网项目），且无法用 flex 时，这个组合仍可用。核心是让子元素左上角先落到父容器中心，再反向平移自身一半尺寸。
- 父容器必须有
position: relative（否则会相对于 viewport 定位） - 子元素设
position: absolute; top: 50%; left: 50%，此时左上角在中心点 - 再加
transform: translate(-50%, -50%)，以自身宽高为基准偏移 - IE9 支持
transform，但不支持transform: translateZ()等 3D 形式；2D 的translate()没问题 - 注意：若子元素含
position: fixed子孙，其定位参考会被打断
grid 布局：现代写法，但 Safari 旧版有坑
和 flex 类似简洁，但实际落地时要小心 Safari 10.1–11.0 的 place-items bug（会忽略 align-items）。
- 推荐显式写
display: grid; justify-content: center; align-items: center - 避免用
place-items: center—— Safari 10.1–11.0 下不生效 - 父容器同样需要明确高度（或由内容撑开）
- Chrome 57+/Firefox 52+/Edge 16+ 原生支持，无需前缀
- 不适用于需要支持 iOS Safari
table-cell 方案：仅限纯内容居中，DOM 结构受限
用 display: table-cell + vertical-align: middle 能绕过 JS 计算，但代价明显。
- 父容器必须设
display: table-cell，这意味着它不能再是block流布局的一部分（比如不能和 float 元素共存） - 子元素必须是
inline或inline-block才响应vertical-align - IE8 支持，但 IE7 及以下需 hack（
*display: inline; zoom: 1） - 现代项目基本不用——flex 出现后，这种“模拟表格”的思路已成历史包袱
真正容易被忽略的是父容器的高度来源：flex/grid/absolute 都依赖父容器有明确高度（height、min-height 或被内容撑开）。如果父容器高度为 auto 且内部只有浮动或绝对定位子元素，它会坍缩为 0，居中自然失效——这时得先解决父容器“塌陷”问题，而不是换居中方法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
