我如何摆脱身体和div之间的这个空间？

Question

所以我把文字集中在一起。但现在body和div之间有一个空格。这是HTML：

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我认为导致这种情况的原因是width: 100vw;。但当我将其更改为width:100%;时，文字不再居中。有关如何解决此问题的任何建议吗？

Answer 1

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

编辑：添加max-width属性。

（同时删除margin上的body）

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

您正在使用自举和container-fluid添加填充，因此请在其中使用row来解决问题：

＆＃13;

＆＃13;

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

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

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="parallax">
      <div class="parent-aligner">
        <div class="aligner">
          <p class="textcontent">lorem ipsum text</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个

.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>