Flex布局设置align-items: center无法居中元素问题咨询

问题原因 #

• body没有设置显式高度：默认body的高度由内部内容高度决定，没有足够的垂直空间作为flex容器的对齐参考，居中属性自然不会生效。
• 使用了错误的对齐属性：align-content: center仅对多行flex容器生效，当前body内只有.container一个flex项目，属于单行容器，交叉轴（垂直方向）对齐需要使用align-items: center。

修复代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center; /* 替换原有的align-content属性 */
  min-height: 100vh; /* 给body设置最小高度为浏览器可视区域高度，提供足够的垂直对齐空间 */
}

.container {
  position: relative;
  background-color: white;
  width: 100%;
  max-width: 1000px;
  min-height: 100px;
}

修复后.container元素就可以在整个页面可视区域内水平、垂直都居中显示。

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