为什么垂直居中后我的 div 顶部有额外的间距？答案

【问题标题】：Why is there extra spacing at the top of my div after vertical centering?为什么垂直居中后我的 div 顶部有额外的间距？
【发布时间】：2015-09-23 18:20:00
【问题描述】：

我一直在为所有带有文本的 div 使用垂直间距技巧，虽然它使垂直间距从 0% 到 90% 完全居中，但它在尖端的顶部留下了更多的空间然后底部。它在我使用它的每个 div 上都这样做。我尝试将填充/边距设置为 0，但什么也没发生。不知道具体是什么原因造成的。这很烦人。有人有想法吗？

活生生的例子-

https://jay-portfolio.herokuapp.com/

问题图片 -

http://i988.photobucket.com/albums/af6/jtbitt/spacing-incorrect_zps0hjolnyv.png

HTML -

<section id="about" ng-controller="aboutController">    
  <div class="container-fluid">

    <div class="row about-row">

      <div class="about-left col-xs-12 col-md-6">
      </div>

      <div class="about-right col-xs-12 col-md-6">
        <div class="about-content">
          <div class="about-content-title">
            <h1><strong>I'M JAY.</strong></h1>
          </div>

          <div class="about-content-info">
            <p ng-if="about.firstParagraph">{{ about.paragraphOne }}</p>
            <p ng-if="!about.firstParagraph">{{ about.paragraphTwo }}</p>
          </div>

          <div class="about-button">
            <button ng-if="about.firstParagraph" class="label label-success" ng-click="about.switchParagraph()">MORE =></button>
            <button ng-if="!about.firstParagraph" class="label label-success"><a href="##skills">VIEW SKILLS</a></button>
          </div>

          <div class="about-personal-info">
            <h4>Email: jaybittner@gmail.com</h4>
          </div>

          <div class="about-icon">
            <a href="{{ profile.url }}" ng-repeat="profile in about.profiles"><img ng-src="{{ profile.icon }}" /></a>
          </div>
        </div>

      </div>

    </div>

  </div>
</section>

CSS -

#about {
  height: 100%; 
  width: 100%;
  background: rgba(0,97,65,1);
  background: -moz-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,97,65,1)), color-stop(7%, rgba(54,135,95,1)), color-stop(22%, rgba(36,123,85,1)), color-stop(53%, rgba(0,97,65,1)), color-stop(76%, rgba(34,121,84,1)), color-stop(90%, rgba(54,135,95,1)), color-stop(100%, rgba(54,135,95,1)));
  background: -webkit-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
  background: -o-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
  background: -ms-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
  background: linear-gradient(to right, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006141', endColorstr='#36875f', GradientType=1 );
  background-repeat: no-repeat;
  color: #101010;
  border-bottom: 3px solid black;
}

#about .container-fluid, #about .row {
  height: 100%;
}

.about-left {
  height: 100%;
  background-image: url('../../images/jay-ocean.jpg'); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-right: 3px solid #101010;
}

.about-right {
  height: 100%;
  width: 50%;
  text-align: center;
  position: relative;
}

.about-content {
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left: auto;
  margin-right: auto;
}

.about-content-title h1{
  font-size: 3.1vw;
  margin-bottom: 0.6vh;
}

.about-content-info p {
  font-size: 1vw;
  word-spacing: 0.3vw;
  margin-bottom: 0.7vh;
}

.about-button button {
  margin-bottom: -0.1vh;
}

.about-personal-info h4 {
  margin-bottom: 0.7vh;
}

.about-button button {
  color: gray;
  border: 1px solid #101010;
  background-color: #101010;
  font-size: 0.7vw;
}

.about-button a {
  color: gray;
}

.about-personal-info h4 {
  font-size: 1vw;
  word-spacing: 0.3vw;
}

.about-icon img {
  height: 3.5vh;
  width: 1.75vw;
  border-radius: 10px;
  border: 1px solid #101010;
  margin: 3px;
}

@media only screen and (max-width: 992px) {
  .about-left {
    height: 50%;
    border-bottom: 3px solid black;
  }

  .about-right {
    height: 50%;
    width: 100%;
  }

  .about-content {
    width: 70%;
  }

  .about-content-title h1 {
    font-size: 5vw;
  }

  .about-content-info p {
    font-size: 2.5vw;
  }

  .about-button button {
    font-size: 2.5vw;
  }

  .about-personal-info h4 {
    font-size: 2.5vw;
  }

  .about-icon img {
    height: 20px;
    width: 20px;
  }
}

【问题讨论】：

JsFiddle 还是现场示例？
提供渲染的 HTML
jay-portfolio.herokuapp.com@Joost
答案原来是我必须从每个页面中的所有 h1 中删除 'margin-top'。上面的额外空间破坏了外观。

标签： html css

【解决方案1】：

尝试将*{margin:0px; padding:0px;} 添加到您的样式表中，然后从那里编辑您的 div 标签。祝你好运。

【讨论】：

解释什么，如何，为什么？这样可以让其他人清楚您的答案。

【解决方案2】：

您可以使用 css 技巧在另一个 div 中垂直居中一个 div：

#outerdiv {
   width: 700px;
   margin-left: auto;
   margin-right: auto;
   height: 400px;
   position: relative;
   background: #eee;
   text-align: center;
}
#innerdiv{
   width: 240px;
   height:100px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -120px;/* half of #innerdiv width*/
   margin-top: -50px;/* half of #innerdiv height*/
  background: #ccc;
}

<div id="outerdiv">
  <div id="innerdiv">Centered div</div>
</div>

【讨论】：

【解决方案3】：

结果证明我需要在 .about-content-title h1 中添加 'margin-top: 0'。 h1 上方有一个额外的空间，导致内容 div 在其顶部有额外的空白空间。 div 居中，但内部有空白区域。这解决了它。

.about-content-title h1 {
  font-size: 3.1vw;
  margin-bottom: 0.6vh;
  margin-top: 0;
}

【讨论】：