如何让container div在body中居中？已设flex属性仍未生效

你当前的问题核心是：仅为目标容器设置了flex属性，但未给它的父元素（body）配置必要的布局规则与高度，导致容器无法在页面中实现垂直居中。

修正方案 #

调整后的完整CSS代码 #

/* 先处理根元素和body的基础样式 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #d6e2f0; /* 可选：添加背景色区分容器与页面 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.container{
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 400px;
  padding: 10px;
  border-radius: 18px;
  text-align: center;
}

关键说明 #

• html, body { height: 100% }：让页面根元素和body占满整个浏览器视口高度，否则body默认仅包裹内容高度，无法支撑垂直居中效果
• body { display: flex; justify-content: center; align-items: center }：将body转为flex容器，这样它的直接子元素（.container）就能借助父容器的flex规则实现水平+垂直双方向居中
• 清除默认边距：margin: 0; padding: 0避免浏览器默认样式干扰布局
• 你原本给.container设置的flex属性是用来控制容器内部元素（图片、文字）的居中，和容器自身在body中的居中无关，这部分可以保留以优化内部排版

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