html - 我怎样才能摆脱 body 和 div 之间的这个空间？

Question

所以我将文本居中。但是现在 body 和 div 之间有一个空白。这是 HTML:

.parent-aligner {
    background: #f2f2f2;
    width: 100vw;
    height: 500px;
    text-align: center; 
  }

  .parent-aligner .aligner {
    display: table-cell;
    height: inherit;
    width: inherit;
    vertical-align: middle;
  }

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

我认为是 width: 100vw; 造成的。但是当我将其更改为 width:100%; 时，文本不再居中。有关如何解决此问题的任何建议？

Answer 1

对于较小的屏幕尺寸，从视口(viewport)宽度中减去滚动条的宽度...

编辑:添加 max-width 属性。

(同时移除 body 上的 margin)

body {
  margin: 0;
}

.parent-aligner {
  background: #f2f2f2;
  width: 100vw;
  max-width: 100%;
  height: 500px;
  text-align: center;
}

.parent-aligner .aligner {
  display: table-cell;
  height: inherit;
  width: inherit;
  vertical-align: middle;
}

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