Flex盒子垂直居中问题：flex:1 0 auto时justify-content失效

首先得明确你要的是哪种垂直居中：是容器内每个盒子的内容垂直居中，还是整个flex容器里的所有盒子整体在页面视口垂直居中？我两种情况都给你解决方案，你按需选用：

情况1：让每个.flex-post盒子的内容垂直居中 #

你原来用line-height:75px来实现垂直居中，但当盒子高度变化（比如超过75px）时就会失效，而且搭配flex:1 0 auto的响应式设置时灵活性不足。更可靠的方式是给每个.flex-post自身也设置flex布局：

.flex-container {
  display: flex;
  /* 如果需要容器内的盒子在水平方向也居中，可以添加这行 */
  /* justify-content: center; */
  gap: 10px; /* 用gap替代margin，是flex布局更干净的间距控制方式 */
}

.flex-post {
  background-color: #f1f1f1;
  font-size: 30px;
  flex: 1 0 auto;
  max-height: 270px;
  max-width: 270px;
  /* 关键：给盒子自身设置flex布局，实现内容垂直+水平居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 移除原来的line-height，避免干扰居中效果 */
  /* line-height: 75px; */
}

这样不管盒子高度如何变化，里面的文字都会始终保持垂直居中，而且完全不会影响你设置的flex:1 0 auto响应式效果。

情况2：让整个flex容器的所有盒子在页面视口垂直居中 #

如果是希望页面拉伸时，整个.flex-container里的盒子整体在页面垂直居中，那你需要给容器的父元素（通常是html和body）设置足够的高度和flex布局：

/* 先让html和body占满整个视口高度 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  /* 给body设置flex布局，用来居中flex-container */
  display: flex;
  align-items: center; /* 实现垂直居中 */
  justify-content: center; /* 实现水平居中（可选） */
}

.flex-container {
  display: flex;
  gap: 10px;
  /* 如果需要页面宽度不够时，flex盒子自动换行，添加这行 */
  flex-wrap: wrap;
}

.flex-post {
  background-color: #f1f1f1;
  font-size: 30px;
  flex: 1 0 auto;
  max-height: 270px;
  max-width: 270px;
  /* 若要盒子内部内容也垂直居中，加上下面三行 */
  display: flex;
  align-items: center;
  justify-content: center;
}

你之前用justify-content:center无效的原因是：默认情况下.flex-container的高度只是内容高度，并没有占满页面，所以控制主轴对齐的justify-content在高度不足的情况下看不出效果。而给父元素设置align-items:center，才是让容器在垂直方向（交叉轴）居中的正确方式。

补充小技巧 #

• gap是flex布局专门用来设置项目间距的属性，比给每个项目加margin更简洁，不会出现容器边缘多余间距的问题。
• flex-wrap:wrap可以让页面宽度不够时，flex盒子自动换行，保证响应式体验更好。

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