最简可靠方式是同时设置 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 猜行为