无法将div内元素居中：justify-content:center失效求助

你的问题核心是没有给需要居中的容器设置display: flex，flex相关属性只有在元素被定义为flex容器时才会生效，具体修改如下：

关键修改点 #

• 给#personalityWrapper添加display: flex，这样justify-content: center和flex-direction: column才能起作用，让内部元素沿垂直方向居中
• 把#personalityMBTI的justify-content: center换成text-align: center，它只是普通块级元素，不需要flex属性，直接设置文本居中即可

修改后的完整CSS代码 #

#personality {
  margin-left: auto;
  margin-right: auto;
  width: 280px;
  height: 500px;
  box-sizing: border-box;
  display: flex;
  background-color: #ffffff;
  border-radius: 20px;
  border: solid #DFDFDF;
  flex-direction: column;
}

#personalityWrapper {
  background: #DFDFDF;
  border: solid #DFDFDF;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  height: 150px;
  /* 添加display:flex，将容器转为flex布局 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 可选：添加后内部元素会水平居中 */
  align-items: center;
}

#personalityMBTI {
  /* 替换为text-align实现文本居中 */
  text-align: center;
  width: 280px;
}

补充说明 #

如果希望#personalityWrapper内的图片、文本等所有元素都水平居中，保留上述代码里的align-items: center即可，这样内部子元素会同时在垂直、水平两个方向居中。

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