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

但它不是纵向和横向居中，我不明白为什么。谁能解释一下我做错了什么？这是一个fidlle：http://jsfiddle.net/WY37a/

Answer 1

试试这个：

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

.Center-Container.is-Table { 
    display: table;
    width: 100%;
    height: 100%;
}

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

FIDDLE

Answer 2

在您的情况下，问题是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;
}

垂直和水平定心并不像预期的那样工作

2 个答案: