CSS使用transform垂直居中后页面底部多余空白解决方法

开发HTML单页应用时，创建多个section区块需要按40:60比例水平分栏，实现分栏内容垂直居中时，栏位末尾、尤其是最后一个区块后出现大量多余空白，严重影响视觉效果。



预期页面尾部无多余空白，分栏内容正常垂直居中。

• 核心样式错误：body 规则中误将高度写为 height: 100vw，把视口宽度值作为高度赋值，导致body高度远大于两个section累加的200vh高度，直接产生大面积尾部空白。
• 布局方案过时：使用传统float浮动布局实现分栏，本身对等高对齐、垂直居中的支持极差，左右栏高度设置不统一（右栏设为fit-content、左栏为100%高度），会产生布局错位和冗余空白。
• 垂直居中逻辑错误：通过transform: translateY(50%)配合100%高度的内层容器实现居中，仅会让元素向下偏移自身高度的50%，无法实现真正的垂直居中，还会产生额外偏移空白。
• 冗余宽度设置：给body设置width: 100vw未计算浏览器默认滚动条的占位宽度，容易触发水平方向溢出，产生多余空白。

直接使用Flex布局替代浮动方案，逻辑更简洁且不会出现异常空白，完整可运行代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
      *,
      ::after,
      ::before {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }

      body {
          /* 修复错误的vw高度，移除冗余100vw宽度 */
          min-height: 100vh;
          margin: 0;
          padding: 0;
          background-color: #23272e;
          color: whitesmoke;
      }

      section {
        width: 100%;
        min-height: 100vh;
      }

      section:nth-child(2) {
        background-color: green;
      }

      .section-content {
        min-height: calc(100vh - 3rem);
        padding: 1.5rem;
      }

      /* 用Flex实现分栏+垂直居中，替代浮动布局 */
      .row {
        width: 100%;
        min-height: 100%;
        display: flex;
        align-items: center;
      }

      .column {
        padding: 1.5rem;
      }

      .col-left {
        width: 40%;
        text-align: center;
      }

      .col-right {
        width: 60%;
        text-align: start;
      }

      .col-content {
        width: 100%;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <section id="qualifications">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Qualifications</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
    <section id="contact">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Contact</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

• 修正body的高度属性，将错误的100vw改为min-height: 100vh，移除冗余的width: 100vw设置，从根源解决超长尾部空白、水平溢出问题。
• 废弃float浮动布局，给分栏容器.row设置display: flex + align-items: center，一行代码实现左右分栏等高、内容垂直居中，不需要额外写清除浮动、偏移的逻辑。
• 统一左右栏的高度逻辑，移除右栏height: fit-content、左栏100%高度的冲突设置，改用min-height适配不同内容长度，避免内容溢出或高度不统一产生的空白。
• 删除错误的transform: translateY(50%)居中逻辑，避免元素偏移产生的错位和空白。

内容的提问来源于stack exchange，提问作者Lakshaya U.