结论：display: flex 配合 justify-content: center 和 align-items: center 是最可靠、省心的居中方案，适用于任意子元素且无需预知尺寸，但需确保父容器有明确高度并清除默认 margin。
display: flex 配合 justify-content: center 和 align-items: center 是当前最可靠、最省心的方案，99% 的场景够用，且无需知道子元素尺寸。
Flex 布局居中：为什么首选它
它解决的是「容器内任意内容」的双轴居中问题，不管里面是文字、图片、div 还是多个子元素，只要父容器设对了，一行代码就生效。
-
justify-content: center控制主轴（默认水平方向）居中 -
align-items: center控制交叉轴（默认垂直方向）居中 - 必须确保父容器有明确高度，比如
height: 100vh或固定值，否则垂直方向没参照 - 如果父容器是
body，记得先清除默认margin，否则顶部会有白边
Grid 居中：适合二维布局需求
当你要同时控制多行多列、或需要更精细的网格结构时，display: grid 更自然。它的 place-items: center 是 justify-items 和 align-items 的简写，效果等价于 Flex 的双 center。
-
place-items: center仅对直接子元素生效，不作用于孙级元素 - 如果子元素本身是
grid容器，它的内部居中逻辑不受外层place-items影响 - 兼容性略逊于 Flex（IE 不支持），但现代项目基本无压力
绝对定位 + transform：老项目或特殊定位场景
当你无法改动父容器的 display 类型（比如父容器已是 position: relative 且不能加 flex），或者需要脱离文档流时，用 top: 50% + left: 50% + transform: translate(-50%, -50%) 最稳妥。
- 必须给父容器加
position: relative，否则top/left会相对于 viewport 计算 -
transform的百分比是基于自身宽高，不是父容器，所以不用提前知道尺寸 - 注意：如果子元素有
margin，它会影响最终位置，建议清空或用box-sizing: border-box统一计算
别踩这些坑
很多“居中失效”其实卡在细节上：
- 父容器没设高度 ——
height: 100vh是最常用解法，但移动端需注意vh在 Safari 中可能不准，可改用min-height: 100vh - 用了
text-align: center却想垂直居中 —— 它只管水平，对块级元素无效，对文字也只影响行内内容 - 误用
margin: auto在非块级/非定宽元素上 —— 它只对块级且有明确width的元素起作用 - 在
table-cell方案里忘了设vertical-align: middle—— 缺这个属性，垂直方向完全不生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
