垂直对齐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

也许是这样的吗？

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

Answer 2

为什么不起作用？ 因为table-cell类似于html table，所以您需要提供一个table类型的容器，然后才能使table-cell占据整个宽度！

工作小提琴

将此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>