CSS实现跨区块Div定位：居中对齐与消除留白

核心思路 #

• 抛弃固定像素的top偏移，改用**CSS变换（transform）**实现自适应居中，确保在任何屏幕尺寸、字体缩放级别下都能保持卡片居中。
• 调整容器内边距与定位逻辑，从根源消除多余留白。

具体实现代码 #

<div className="bg-tertiary text-white text-center relative pb-[calc(50px+50%)]">
  <!-- 上方标题区块：移除多余的底部内边距pb-[100px] -->
  <div className="bg-secondary px-10">
    <h1 className="uppercase font-black text-2xl tracking-wider pt-10 pb-10 italic">HEADER TEXT</h1>
  </div>

  <!-- 卡片容器：用绝对定位+transform替代固定top偏移 -->
  <div className="absolute left-0 right-0 top-[100%] transform -translate-y-1/2 columns-4 px-10">
    <MainSectionCard />
    <MainSectionCard />
    <MainSectionCard />
    <MainSectionCard />
  </div>
</div>

代码说明 #

1. 父容器设置：

   • 添加relative作为卡片容器的定位参考基准。
   • pb-[calc(50px+50%)]：50px保留原本需要的底部留白，50%对应卡片高度的一半，确保父容器高度能容纳卡片下半部分，彻底避免页面出现多余留白。

2. 标题区块调整：移除pb-[100px]，消除因多余内边距造成的无效空间。

3. 卡片容器定位：

   • absolute left-0 right-0：让卡片容器宽度自动充满父容器，适配不同屏幕宽度。
   • top-[100%]：将容器精准定位到标题区块的底部边缘。
   • transform -translate-y-1/2：将卡片向上移动自身高度的50%，实现跨区块完美居中，该方法完全不受卡片自身尺寸变化影响。

额外优化建议 #

• 若使用Tailwind CSS，可自定义工具类简化重复代码，比如将transform -translate-y-1/2整合为一个专属类。
• 若卡片高度在不同屏幕下差异较大，可结合媒体查询微调父容器的padding-bottom，确保留白始终适配卡片尺寸。

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