如何消除body与div间的空白？解决文本居中后的布局问题

看起来你碰到了两个关联的小问题：100vw导致的空白区域，以及换成100%后文本无法正常居中。让我一步步帮你拆解和解决：

问题根源分析 #

1. 100vw引发空白的原因：
   浏览器默认给body设置了margin: 8px，而100vw代表的是视口的完整宽度（包括垂直滚动条的宽度，如果页面出现滚动的话）。当你给.parent-aligner设置width: 100vw时，它的宽度会超出body的内容宽度（因为body自带margin），导致横向滚动条出现，视觉上就像是body和div之间多出了空白。

2. 100%下文本无法居中的原因：
   你想用display: table-cell实现垂直居中，但这个属性必须依赖父元素设置display: table才能正常生效。你的.parent-aligner是默认的块级元素（display: block），所以table-cell的垂直对齐效果完全失效，文本自然没法居中。

解决方案 #

我给你两种可行的方案，你可以根据自己的习惯选择：

方案一：修复table-cell布局（保留你的原有思路） #

1. 先重置body的默认margin，彻底消除空白：

body {
  margin: 0;
}

2. 给.parent-aligner添加display: table，让内部的table-cell正常工作，同时用width: 100%代替100vw：

.parent-aligner {
  background: #f2f2f2;
  width: 100%;
  height: 500px;
  text-align: center;
  display: table; /* 新增这一行，让table-cell生效 */
}
.parent-aligner .aligner {
  display: table-cell;
  height: inherit;
  width: inherit;
  vertical-align: middle;
}

这样既解决了空白问题，又能让文本保持水平+垂直居中。

方案二：用Flex布局（更现代、简洁） #

Flex布局是现在实现居中最常用的方式，代码更简洁，还能避免table布局的潜在问题：

body {
  margin: 0; /* 同样先消除body默认margin */
}
.parent-aligner {
  background: #f2f2f2;
  width: 100%;
  height: 500px;
  display: flex; /* 启用flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

同时你的HTML可以简化，去掉多余的.aligner容器：

<div class="container-fluid">
  <div class="parallax">
    <div class="parent-aligner">
      <p class="textcontent">lorem ipsum text</p>
    </div>
  </div>
</div>

额外提示 #

如果你的.container-fluid或.parallax设置了padding/margin，也要检查它们是否会影响宽度计算，确保整个布局的宽度是连续的100%，避免再次出现异常空白。

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