垂直对齐h1并将宽度保持在100％

Question

I have the following 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>

The .section-cover div changes height dynamically based on viewport size whenever the browser is resized. I need to align the <h1> element vertically inside the section-cover div. So far I've achieved that using display: table-cell however now I can't get the width to stick at 100% . Here's a JSFiddle example:

http://jsfiddle.net/AvrrM/

How can I modify this to vertically align the <h1> and keep the width at 100%?

Answer 1

Maybe something like this?

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

Why is itsn't working?? because table-cell is similar to html table, you need to provide a container which is table type before you can make the table-cell occupy the full width!!

working fiddle

add this CSS in your markup :

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>