侧边Div宽度不均时，如何用Tailwind实现页面居中适配全屏幕？

• 需求：DIV1始终处于页面正中央，下方DIV2、DIV3、DIV4的布局不能影响DIV1的居中效果
• 当前问题：DIV1无法保持居中，且Tailwind默认宽度调整步长较大，不想通过手动设置精确像素宽度实现居中，需要适配所有屏幕尺寸的方案
• 当前使用的Tailwind代码：

<div className="flex flex-col items-center justify-center mt-10">
    <div className="flex items-center justify-center w-128 my-4">
        <DIV1 />
    </div>
    <div className="flex">
      <div className="p-8 max-w-xs">
        <DIV2 />
      </div>
      <div className="p-8 w-[500px]">
        <DIV3 />
      </div>
      <div className="p-8">
        <DIV4 />
      </div>
    </div>
</div>

核心思路是让DIV1的居中逻辑与下方布局完全独立，避免父容器被下方内容撑开导致的居中偏移：

// DIV1 独立居中，不受下方布局影响
<div className="mt-10">
  <div className="flex items-center justify-center w-128 my-4 mx-auto">
    <DIV1 />
  </div>
</div>

// 下方三个DIV的布局，自身独立排版
<div className="flex flex-wrap justify-center">
  <div className="p-8 max-w-xs">
    <DIV2 />
  </div>
  <div className="p-8 w-[500px]">
    <DIV3 />
  </div>
  <div className="p-8">
    <DIV4 />
  </div>
</div>

方案说明 #

1. DIV1的居中处理：将DIV1的容器从原来的flex-col父容器中分离，使用mx-auto实现水平居中，该方式会自动适配视口宽度，确保DIV1始终处于页面正中央，不受下方元素的宽度影响。
2. 下方布局优化：给下方的flex容器添加flex-wrap justify-center，既保持桌面端的横向排列，又能在小屏幕上自动换行，同时让这一组元素整体居中，不会破坏页面布局的协调性。
3. 无需精确宽度：整个方案不需要手动设置父容器的精确像素宽度，完全依赖Tailwind的响应式工具适配所有屏幕尺寸。

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