Flex用display: flex、justify-content: center和align-items: center实现居中；Grid用display: grid和place-items: center一行搞定；均需父容器有明确高度，且避免子元素脱离文档流。
用 Flex 或 Grid 实现水平垂直居中，其实不难，关键在理解核心属性的作用和容器与子元素的关系。
Flex 布局：两行代码搞定
给父容器设置 display: flex，再加两句对齐声明即可：
- justify-content: center —— 控制主轴（默认是水平方向）上的对齐，让元素水平居中
- align-items: center —— 控制交叉轴（默认是垂直方向）上的对齐，让元素垂直居中
如果子元素是单个块级元素或内联元素（如图片、按钮），这样写就足够了。注意：父容器需要有明确高度（比如 height: 100vh），否则“垂直居中”可能没效果。
Grid 布局：更简洁的写法
Grid 的 place-items 是 justify-items 和 align-items 的简写，适用于所有直接子元素：
立即学习“前端免费学习笔记（深入）”；
- display: grid + place-items: center —— 一行代码同时实现水平和垂直居中
- 它等价于 justify-items: center; align-items: center
同样要求父容器有可计算的高度。相比 Flex，Grid 在多子元素时也能统一居中，且不改变文档流顺序，适合卡片、弹窗等场景。
常见踩坑提醒
居中失效往往不是写法错，而是忽略了前提条件：
- 父容器没设高度，尤其是用百分比或 vh 时，记得检查是否被上层塌陷影响
- 子元素设置了 float 或 position: absolute，会脱离 Flex/Grid 的布局控制
- 用了 align-self 或 justify-self 覆盖了父级设置，导致个别子项偏移
调试时可以临时加 border: 1px solid red 看清容器范围，再确认子元素是否真的在父盒子里。
选 Flex 还是 Grid？
单个子元素居中，两者效果一致，任选其一；
- 需要响应式换行、等宽分布（如导航栏、按钮组），优先 Flex
- 要精确控制二维空间（如网格列表、模态框、复杂表单），Grid 更直观
现代浏览器都支持，放心用。旧版 IE 不支持，如需兼容，可降级为绝对定位 + transform，但没必要为老浏览器牺牲可维护性。
