响应式开发：如何在屏宽≤1020px时让footer子div居中垂直堆叠

• 把容器改成display: block后子div左对齐：块级父容器的text-align: center仅对行内/行内块元素生效，默认块级的子div根本不受这个属性控制，自然会贴左排列，尤其当子div设置了固定宽度时，这个错位会特别明显。
• 额外加flex-direction: row完全没反应：当容器的display属性被改成block时，所有和flex布局相关的属性都不会被触发，写了等于白写。

其实你根本没必要把display从flex改成block——毕竟基础布局本来就是flex容器，只要调整几个flex的参数，就能直接实现想要的垂直堆叠居中效果，连display都不用动。

不用改原来的基础样式，只需要调整媒体查询里的规则就行：

1. 原有的基础样式完全保留，不需要任何改动：

   .footer-container {
     width: 100%;
     min-height: 260px;
     height: auto;
     background: black;
     color: white;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     position: absolute;
   }
   

2. 媒体查询里删掉之前重复抄的那堆基础样式，只写需要覆盖的布局规则：

   @media only screen and (max-width: 1020px) {
     .footer-container {
       /* 把flex的主轴从水平切到垂直，子元素自然就从上到下堆叠了 */
       flex-direction: column;
       /* 控制交叉轴水平居中，解决子div左对齐的问题 */
       align-items: center;
       /* 给垂直堆叠的子元素留点垂直间距，避免内容挤在一起 */
       gap: 1.5rem;
       /* 垂直排列不需要换行逻辑，把原来的flex-wrap关掉，避免布局异常 */
       flex-wrap: nowrap;
     }
   }
   

• 屏幕宽度大于1020px时，完全沿用原来的横向居中排列效果，不会有任何布局变化
• 屏幕宽度小于等于1020px时，所有子div自动沿垂直方向从上到下堆叠，同时保持水平居中，不需要额外调整子元素的样式
• 全程没有改动display属性，所有flex布局参数正常生效，不会出现代码写了不生效的问题

提醒：之前在媒体查询里把footer容器的所有样式重新抄了一遍完全没必要，这些基础样式本来就全局生效，媒体查询只需要写和基础规则有差异的部分就行，重复写不仅增加冗余代码，还容易写出像justify-content: center这种在block布局下完全无效的废代码。

如果一定要用display:block的布局方式，也得给footer下的所有子div加margin: 0 auto;的样式，靠块级元素左右外边距自适应实现水平居中，但这个方案要额外改子元素样式，维护成本比flex方案高，不推荐。

内容的提问来源于stack exchange，提问作者Kevin.a