最简可靠方式是同时设置 justify-content: center 和 align-items: center，前提是父容器为 display: flex 且有明确高度；仅 justify-content 不足，因它只控制主轴对齐，align-items 才控制交叉轴居中。
flex容器如何同时实现水平和垂直居中
直接设置 justify-content: center 和 align-items: center 即可，这是最简、最可靠的方式。前提是父容器已声明为 flex 布局（display: flex），且有明确高度（否则 align-items: center 在垂直方向可能无效果）。
为什么只写 justify-content 不够
justify-content: center 仅控制主轴（默认是水平方向）对齐，不影响交叉轴（垂直方向）。若未设 align-items，元素在垂直方向会按默认值 stretch 拉伸，或按内容自然堆叠，无法居中。
- 主轴方向可变：若设了
flex-direction: column，则justify-content控制的是垂直方向，此时需配合align-items控制水平方向 - 子元素高度影响表现：当子元素自身有固定高度或
align-self覆盖时，align-items可能被局部绕过 - 容器无高度时常见失效：比如父容器高度依赖内容，而子元素又没撑开它，
align-items: center就“没地方可居中”——此时需给父容器设min-height: 100vh或其他明确高度
替代写法：用 place-items（现代但兼容性有限）
在支持 place-items 的浏览器中（Chrome 85+、Firefox 73+、Safari 14.1+），可用 place-items: center 一键替代两行声明。但它仅适用于 display: grid 或 display: flex 容器（Flex 中行为等同于 justify-content + align-items）。
- 不推荐在需要兼容 IE 或旧版 Safari 的项目中使用
- 不能单独控制某一个方向，必须成对设置
- 注意：若父容器是
display: inline-flex，place-items仍有效，但高度约束逻辑不变——仍需确保容器有可居中的高度空间
容易忽略的坑：margin: auto 在 flex 中的特殊行为
在 flex 容器内，给子元素设 margin: auto 也能触发水平+垂直居中，且不依赖容器高度是否明确。但这属于“意外可用”，不是设计初衷，行为边界较模糊：
立即学习“前端免费学习笔记（深入）”；
- 仅对单个子元素稳定；多个子元素时，
margin: auto会把剩余空间均分，不一定居中目标项 - 当子元素设置了
align-self或justify-self，可能覆盖margin: auto的居中逻辑 - 在 flex 主轴方向上，
margin: auto会吸收所有剩余空间，但若子元素本身是flex-grow: 1，效果可能冲突
真要居中，优先用 justify-content + align-items，别靠 margin: auto 猜行为。
