垂直居中和水平居中无法正常工作

Agis 发表于 Dev

行为

我正在使用具有以下标记的Bootstrap框架：

<header id="home" data-scroll-index="0">
 <div class="Center-Container is-Table">
      <div class="Table-Cell">
        <div class="Center-Block">
            <h1>DUMMY TEXT</h1>
        </div>
      </div>
    </div>
</header>

和这个CSS样式：

#home { 
background:url(../img/bg.jpg) 50% 0 no-repeat fixed;
color: white;
height: 800px;
margin: 0;
}

 .Center-Container.is-Table { display: table; }
 .is-Table .Table-Cell {
  display: table-cell;
 vertical-align: middle;
   }
 .is-Table .Center-Block {
 width: 50%;
 margin: 0 auto;
 z-index:999999;
  }

但是它不会在垂直和水平方向上居中，我也不知道为什么。有人可以向我解释我在做什么错吗？这是一个文件：http : //jsfiddle.net/WY37a/

洛克·舒塔尔（Lokesh suthar）

在您的情况下，问题在于的is-Table高度和宽度与Table-cell应与标头的高度和宽度相等的位置相同。

小提琴

您可以删除is-Table div

#home {
    background:url(http://catexcomp.ro/nevermore/img/bg.jpg) 50% 0 no-repeat fixed;
    color: white;
    height: 500px;
    margin: 0;
    display:table;
    width:100%;
}
.Table-Cell {
    display: table-cell;
    vertical-align: middle;
}
.Center-Block {
    width: 50%;
    margin: 0 auto;
    z-index:999999;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。