Tailwind CSS如何让父容器居中且两个子div各占整行垂直排列

问题原因 #

Flex 容器的默认主轴方向为水平方向（flex-direction: row），该布局下所有直接子元素（flex 项）都会沿水平方向排列，和子元素是否设置block属性无关——flex 项的display属性会被块化，不会影响父容器的排列规则。
另外你当前给父容器加的justify-center是控制子元素在主轴方向的对齐，而非让父容器本身在屏幕中居中。

解决方案 #

你可以根据需求选择以下两种方案：

方案1：保留flex布局，修改排列方向

如果需要用到flex的其他布局能力，给父容器添加flex-col类修改主轴为垂直方向，同时补充属性实现需求：

• 要让父容器本身在屏幕水平居中，给父加mx-auto类，同时可根据需求设置父容器的宽度、最大宽度
• 要让子元素占据父容器整行宽度，给子元素加w-full类

修改后的代码示例（React环境下用className，普通HTML替换为class即可）：

<div className="mx-auto flex flex-col w-full max-w-[1200px]">
  <div className="w-full"> <!-- DIV 001 -->
  </div>
  <div className="w-full"> <!-- DIV 002 -->
  </div>
</div>

如果需要子元素在父容器内水平居中，可以额外给父容器加items-center类。

方案2：移除flex布局，用更简洁的实现

如果不需要flex的其他特性，直接删除父容器的flex justify-center类，仅保留mx-auto实现父容器水平居中即可：div本身就是块级元素，默认会垂直排列、占据整行宽度，不需要额外加block类。
修改后的代码示例：

<div className="mx-auto w-full max-w-[1200px]">
  <div> <!-- DIV 001 -->
  </div>
  <div> <!-- DIV 002 -->
  </div>
</div>

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