CSS实现垂直堆叠三div全宽布局 中间div固定视口中心无滚动条

核心实现逻辑 #

以中间块为定位锚点，将其永久固定在视口正中心，上下两个块直接依附在中间块的上下边缘，全局禁用滚动，超出视口的内容直接隐藏，完全满足需求：

• 三个块垂直堆叠，宽度完全一致
• 中间块始终位于视口水平+垂直中心，不受窗口尺寸变化影响
• 上下块可自由设置高度，超出视口部分不会触发滚动条

Tailwind CSS 可直接运行代码 #

<!-- 全局给body清除默认边距、禁止滚动 -->
<body class="m-0 overflow-hidden">
  <!-- 铺满整个视口的容器，隐藏超出内容 -->
  <div class="fixed inset-0 overflow-hidden">
    <!-- 中间块：绝对定位实现视口居中，作为上下块的定位父级 -->
    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] aspect-square bg-blue-500 relative">
      中间块内容
      <!-- 上块：贴在中间块顶部上方，宽度自动和中间块一致 -->
      <div class="absolute left-0 bottom-full w-full h-[120vh] bg-red-500/80 shrink-0">上块内容</div>
      <!-- 下块：贴在中间块底部下方，宽度自动和中间块一致 -->
      <div class="absolute left-0 top-full w-full h-[120vh] bg-red-500/80 shrink-0">下块内容</div>
    </div>
  </div>
</body>

代码中w-[80vw]是中间块宽度、aspect-square是中间块高宽比、h-[120vh]是上下块高度，都可以根据实际需求替换成任意值。

原生CSS 实现代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden; /* 全局禁止滚动 */
    }
    .viewport-wrap {
      position: fixed;
      inset: 0;
      overflow: hidden; /* 隐藏超出视口的上下块内容 */
    }
    .middle {
      /* 中间块始终视口居中 */
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 80vw; /* 自定义中间块宽度 */
      aspect-ratio: 1/1; /* 自定义中间块高宽比 */
      background: #3b82f6;
      position: relative; /* 作为上下块的定位基准 */
    }
    .top, .bottom {
      position: absolute;
      left: 0;
      width: 100%; /* 宽度和中间块完全一致 */
      height: 120vh; /* 自定义上下块高度 */
      background: rgba(239,68,68,0.8);
    }
    .top {
      bottom: 100%; /* 贴在中间块顶部上方 */
    }
    .bottom {
      top: 100%; /* 贴在中间块底部下方 */
    }
  </style>
</head>
<body>
  <div class="viewport-wrap">
    <div class="middle">
      中间块内容
      <div class="top">上块内容</div>
      <div class="bottom">下块内容</div>
    </div>
  </div>
</body>
</html>

原代码问题说明 #

之前的flex布局方案无法实现效果的核心原因：

• 居中对象是三个块组成的整体内容流，而非单独的中间块，当上下块高度变化时，整体内容的中点会偏移，导致中间块无法始终对准视口中心
• 未给根元素和视口容器设置overflow: hidden，内容超出视口时会触发滚动条
• 未使用固定定位锁定视口上下文，正常文档流的排版会受内容总高度影响，无法实现上下块越界不触发滚动的效果

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