最推荐的现代解法是display: flex + justify-content: center + align-items: center，它代码最少、语义清晰、兼容性好（Chrome 29+/Firefox 20+/Safari 6.1+/Edge 12+），且不依赖子元素尺寸或额外DOM。
直接用 display: flex + justify-content: center + align-items: center，是当前最可靠、代码最少、语义最清晰的方案。
flex 布局是最推荐的现代解法
只要父容器能设为 flex 容器，子元素无论文字、图片、SVG 还是动态生成的卡片，都能稳稳居中。它不依赖宽高、不引入额外 DOM、不触发重排、兼容性也早已不是问题（Chrome 29+/Firefox 20+/Safari 6.1+/Edge 12+）。
- 必须给父元素加
display: flex，否则无效 -
justify-content: center控制主轴（默认水平）居中，align-items: center控制交叉轴（默认垂直）居中 - 如果父容器高度未显式设定（比如只靠内容撑开），需确保其有可计算的高度来源（如
min-height、height: 100vh或父级设置了高度） - 遇到多行子元素时，
align-items仍生效；若想每行单独居中，得配合flex-wrap: wrap和align-content: center
transform + absolute 是兼容老浏览器的兜底方案
当项目必须支持 IE10 或某些 WebView（如旧版微信内置浏览器），position: absolute 配合 transform: translate(-50%, -50%) 仍是首选。它不要求知道子元素尺寸，也不依赖父容器 display 类型。
- 父元素必须有定位上下文（即
position: relative、absolute或fixed），否则top: 50%会相对于 viewport 计算 -
transform的百分比是相对于自身宽高，所以translate(-50%, -50%)才能真正把中心点对齐到父容器中心 - IE9 及以下不支持
transform，此时只能退回到margin负值（但前提是宽高已知）或放弃居中 - 慎用在动画频繁的元素上：
transform触发合成层，但若父元素有will-change: transform或频繁重绘，可能引发性能抖动
grid 布局适合复杂嵌套场景
如果父容器本身已是网格容器，或需要同时控制多个子项的位置关系（比如居中 + 左侧图标 + 右侧按钮），display: grid 比 flex 更自然。
- 只需父元素设置
display: grid、place-items: center（等价于justify-items: center+align-items: center） - 不改变文档流，不影响其他子元素的布局逻辑（而 flex 会让所有直系子元素变成 flex item）
- IE 不支持
grid（连 partial 支持都没有），仅适用于明确放弃 IE 的项目 - 注意
place-items作用于所有子元素；若只想居中某一个，得用justify-self: center+align-self: center在该子元素上单独设置
table-cell 方案现在基本可以忽略
虽然 display: table-cell + vertical-align: middle + text-align: center 能工作，但它本质是借用表格渲染逻辑，语义错乱、调试困难，且在 flex/grid 普及后已无存在必要。
- 必须把子元素设为
display: inline-block（因为vertical-align对块级元素无效） - 父元素设为
table-cell后，width/height行为变得不可预测，尤其和max-width、flex混用时容易出 bug - 移动端 Safari 对
table-cell的盒模型处理偶有差异，曾出现过文字截断或高度塌陷 - 除非维护超老项目且不能改结构，否则别碰
真正容易被忽略的是父容器高度来源——无论用哪种方案，如果父容器高度由内容撑开，而子元素又恰好是空的或只含浮动元素，那整个居中就会失效。检查时优先确认父容器是否真有高度，而不是盯着子元素样式反复调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
