@media媒体查询设置flex-direction:column后如何居中div？

Flex布局的对齐规则和主轴方向强绑定，修改flex-direction后，两个核心对齐属性控制的方向会同步切换，这是居中失效的核心原因：

• flex-direction: row（默认值）：主轴为水平方向，justify-content控制水平对齐，align-items控制垂直对齐
• flex-direction: column：主轴切换为垂直方向，justify-content改为控制垂直对齐，水平对齐转由align-items控制

你在776px以下的媒体查询中仅设置了justify-content: center，该规则此时只负责子元素的垂直方向居中，水平方向没有配置对应的对齐属性，自然会出现居中异常。

在移动端媒体查询的容器样式中添加align-items: center，即可实现纵向排列下的子元素水平居中。如果不需要保留大屏端的200px上内边距，也可以同步调整padding值适配移动端显示：

.banner-content-container {
  display: flex;
  justify-content: space-evenly;
  padding-top: 200px;
}

@media screen and (max-width:776px) {
  .banner-content-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* 新增：控制水平方向居中 */
    align-items: center;
    /* 可选：调小移动端上内边距，避免顶部留白过多 */
    padding-top: 60px;
  }
}

• 如果需要纵向排列的三个内容块之间保留均匀间距，可以搭配gap属性控制子元素间距，比单纯靠padding调整更灵活：

@media screen and (max-width:776px) {
  .banner-content-container {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    /* 控制每个内容块之间的垂直间距 */
    gap: 48px;
  }
}

• 如果需要每个内容块内的标题、文字也居中显示，可以给子元素添加文本居中规则：

.content {
  text-align: center;
}

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