Vertically aligning h1 and keeping width at 100% - html

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>