使用CSS flexbox实现div垂直居中时align-items不生效如何解决

问题核心原因 #

• 根元素html未设置高度，导致body的height: 100%没有可继承的参考值，body最终高度仅等于内容高度，没有多余垂直空间支持子元素居中
• 你当前的flex属性仅配置在.container上，仅能控制它内部的元素对齐，无法控制.container本身在父容器中的位置
• .container中误用了align-content属性，该属性仅作用于多行flex元素的对齐，单行flex布局应使用align-items

需要修改/新增的配置 #

1. 调整根元素与body的样式 #

给html添加高度属性，同时给body配置flex布局，直接居中内部的.main容器：

/* 新增html高度配置 */
html {
  height: 100%;
}

body {
  background: url(images/pattern-background-mobile.svg);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  /* 替换原height为min-height，避免内容超过视口时被截断 */
  min-height: 100%;
  /* 新增flex配置，实现内部元素垂直水平居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 修正.container的对齐属性 #

把.container中的align-content替换为align-items，实现内部元素水平居中：

.container {
  display: flex;
  justify-content: center;
  /* 替换align-content为align-items */
  align-items: center;
  flex-direction: column;
  border: 2px solid red;
  padding: 0;
  margin: 2em;
  width: 80%;
}

如果不需要修改body的布局属性，也可以给.main容器添加如下样式，效果一致：

html, body {
  height: 100%;
  margin: 0;
}
.main {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

内容的提问来源于stack exchange，提问作者Gabriele