Keep div centered

Hi there!

I have a div in html that should always be centered vertically and horizontally. The problem is I'm adding content on to go so the height of the div always changes. Is there any way to keep it nicely centered (I guess this has to be done with javascript)? I can't find some decent samples on the world wide web but if you can find one, please let me know!

Kind regards!

 

jQuery.fn.center = function() {
    var container = $(window);
    var top = -this.height() / 2;
    var left = -this.width() / 2;
    return this
        .css('position', 'absolute')
        .css({ 
            'margin-left': left + 'px',
            'margin-top': top + 'px',
            'left': '50%',
            'top': '50%'
        });
}

Code (markup):

Then if you have an id on your div called "keepcentered" for example, you would do

$('#keepcentered').center();

Code (markup):

 

if you want to vertically align it using css, you'll have a hard time doing it.

trendint's suggestion would be okay..