如何使用CSS中的Flexbox快速实现容器内子元素水平垂直居中？-css教程-PHP中文网

必须同时使用justify-content: center和align-items: center才能实现水平垂直居中，因前者控制主轴（默认水平）、后者控制交叉轴（默认垂直），缺一不可；父容器还需设display: flex和明确高度（如min-height: 100vh）。

如何使用css中的flexbox快速实现容器内子元素水平垂直居中？

单独设justify-content: center只能水平居中，align-items: center只管垂直方向——两者缺一不可。Flex容器默认主轴是row（横向），所以justify-content控制主轴对齐，align-items控制交叉轴（纵向）对齐。

常见错误：只写一个属性，或误以为text-align: center能居中块级子元素（它只对内联内容有效）。

最常踩的坑不是写错属性名，而是父容器没满足Flex布局前提条件。

父元素是否真的设置了display: flex（或display: inline-flex）？漏写或被其他CSS覆盖都会导致失效
子元素是否设置了flex-shrink: 0或min-width/min-height干扰了拉伸行为？尤其当子元素内容超长、出现换行时，align-items仍生效，但视觉上“偏了”
有没有意外触发flex-direction: column？这时主轴变成纵向，justify-content就管垂直方向，align-items反而管水平——容易搞反

不需要额外类名、不用JS、不依赖内容高度，以下是最小完备写法：

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

div.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

注意：container必须是有明确尺寸的块级容器（比如设了width/height，或被父级约束）。如果它本身没有高度，浏览器按内容撑开，那“垂直居中”就失去参照基准——此时加min-height: 100vh或height: 100%更稳妥。

避免用margin: auto替代——它在Flex里虽也有效，但只对单个子元素起作用，多个子项会挤在一起
不要套用flex: 1到子元素上，除非你真想让它占满剩余空间；居中不需要这个
移动端需留意vh单位在iOS Safari中可能因地址栏缩放导致高度跳变，可配合min-height: -webkit-fill-available兜底