豎直對準的h1和寬度保持在100％

Question

我有以下HTML：

<div class="section-cover dark-cyan" ng-style="{height: getCoverHeight()}"> 
    <div class="container"> 
     <h1 class="intro">Some intro text.</h1> 
    </div> 

    <div class="arrow-holder" ng-click="scrollTo('video-container');"> 
     <span class="arrow"></span> 
    </div> 
</div> 

的.section-cover DIV改變高度動態基於每當瀏覽器的尺寸調整視口大小。我需要在section-cover div內垂直對齊<h1>元素。到目前爲止，我已經實現了使用display: table-cell但是現在我無法獲得寬度在100%。這裏有一個例子的jsfiddle：

http://jsfiddle.net/AvrrM/

我怎麼能修改此垂直對齊<h1>並保持寬度100％？

Answer 1

爲什麼它不工作？因爲table-cell類似於html表格，你需要提供一個容器，它是table類型，然後才能使table-cell佔據全寬！

working fiddle

在您的標記添加此CSS：

html, body { 
    width: 100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
#table { 
    width: 100%; 
    display:table; 
    text-align:center; 
} 

HTML

<div id="table"> 
<div class="section-cover dark-cyan" style="background: blue; color: white; height: 200px"> 

<!-- all inner html here --> 

</div> 
</div> 

Answer 2

也許這樣的事情？

http://jsfiddle.net/AvrrM/1/

.section-cover { 
    position: relative; 
    display: table; 
    vertical-align: middle; 
    width: 100%; 
} 

.container{ 
    display: table-cell; 
    background: red; 
    text-align: center; 
    vertical-align: middle; 
}