Vertically and Horizontally Center Text Responsively - css

Question

I'm trying to make a website using a parallax jquery pluin, and i would like the first 'slide' to be a title which is right in the center of the screen.
I've been struggling to do this - horizontally aligning it is simple however I can't vertically align it.
Is there a way to do this which works and is also responsive? I've included a fiddle, to show you the basic structure - http://jsfiddle.net/SohamK/yKDWS/1/. I have also reproduced the html of the fiddle below:
<div class="container">
<div class="title">
<h1> My Title </h1>
</div>
Any help would be much appreciated!
Thanks!

Answer 1

You can use display property like this:
.container {
width:100%;
height:100%;
display:table;
text-align:center;
}
.title {
display:table-cell;
vertical-align:middle;
}
The demo http://jsfiddle.net/yKDWS/13/

Answer 2

$(function() {
$('h1').css({
'position' : 'absolute',
'left' : '50%',
'top' : '50%',
'margin-left' : -$(this).width()/2,
'margin-top' : -$(this).height()/2
});
});
Try this with jquery

Answer 3

You can use the CSS property display:table, and use vertical-align:middle & text-align:center. This is perfectly center your text vertically and horizontally in your div.
Your div .container will have a display:table, and your div .title will have a display:table-cell with the property vertical-align:middle.
Check Can I Use for display:table browser compatibility.
Full CSS will look like this -
.container {
display:table;
}
.title {
text-align:center;
display:table-cell;
vertical-align:middle;
}

Answer 4

Basically this would always align it to vertical middle
.title
{
margin-top:25%;
}
demo here
Whats the exact markup for you page, it depends on that.
If the above demo solves it, its fine, else markup would be required!! :)

Answer 5

Try this : Demo here
CSS
.container {
width:500px;
height:300px;
background:#333;
display: table;
}
.title {
color:#fff;
padding:0;
display: table-cell;
vertical-align: middle;
text-align:center;
}