vertical align text in a div - responsive to window resize - html

Question

I have some vertically aligned text in a div that I want to remain vertically centered when the browser resizes. As the div shrinks with the browser, my text becomes offset towards the bottom of the div.
Any suggestions?
Here is a Fiddle of the issue I'm experiencing.
HTML:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
<h1>
Vertically aligned text
</h1>
</div>
</div>
</div>
CSS:
.outer-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat left top;
background-size: 100% auto;
height: 360px;
}
.inner-wrapper {
display: table;
width: 100%;
height: 360px;
}
.header-wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
h1 {
color: #fff;
}

Answer 1

Is this what you're looking for?
The text actually does center, though the background image doesn't, hence it looks like it doesn't, so here is 2 versions (fiddle use background-size: cover) where image centers too
Updated fiddle
html, body {
height: 100%;
}
.outer-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat center center;
background-size: 100% auto;
max-height: 360px;
height: 100%;
}
.inner-wrapper {
display: table;
width: 100%;
height: 100%;
}
.header-wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
h1 {
color: black;
}
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
<h1>
Vertically aligned text
</h1>
</div>
</div>
</div>

Answer 2

The problem is your background, the div is staying the same size and the text is staying centered, you background makes it seem not so. Like Gavin said use background-size cover.

Answer 3

Your problem isn't actually that your text isn't centered, because it is. Your actual issue is that your image doesn't have enough height at that size to fill the height of the container.
See the screenshot below, here I have used the element inspector to highlight the "outer-wrapper" which is the blue box you see. Notice the text is centered within it.
So to tackle the actual issue which is the image either needs to fill the div or needs to stay centered itself.
To stay centered add the following to the outer-wrapper: (Fiddle)
background-position: center;
To fill the div, remove the background-size from outer-wrapper and add this: (Fiddle)
background-position: center;
background-cover: cover;