我怎样才能摆脱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

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

编辑：添加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>

Answer 2

试试这个

.parent-aligner {
    background: #f2f2f2;
    width: 100%;
    height: 500px;
    text-align: center; 
    display:table;
  }
  .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>