html - 垂直和水平居中无法按预期工作

Question

我正在使用 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;
  }

但它没有垂直和水平居中，我不明白为什么。有人可以解释我做错了什么吗？ 这是一个 fiddle :http://jsfiddle.net/WY37a/

Answer 1

您遇到的问题是 is-Table 的高度和宽度与 Table-cell 相同，因为它应该等于标题的高度和宽度。

FIDDLE

您可以删除 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;
}