Question

Possible Duplicate:
Vertically align div (no tables)

I have a div and I would like to align all content within this div – currently an h1 tag vertically centre how would I do this?

HTML:

<div>
   <h1>Content</h1>
</div>

CSS:

div{
  width:100%;
}
div h1{
  margin:0 auto;
}

Answer 1

I think there is no cross browser solution for vertically centering your DIV container, but there is a jQuery plugin that allows you to do this:

(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = (ph - ah) / 2;
$(this).css('margin-top', mh);
});
};
})(jQuery);

Then you can add this Javascript:

$(document).ready(function() {
$('div h1').vAlign();
});