Question

I’m working on very, very simple jQuery plugin that simply changes position of element to the center of browser’s window (horizontally and vertically). Often this is called ‘dead center’.

jQuery.fn.dead_center = function() {

    var element;

    element = this;

    $(element).css({
        position: 'absolute',
        top: ($(window).height() - $(this).outerHeight()) / 2,
        left: ($(window).width() - $(this).outerWidth()) / 2
    });

}

Then I have <div /> with <h1 /> in it like this:

<div class="dead_center">
    <h1>Foo and bars.</h1>
</div>

At the end, I call my ‘plugin’ like this:

$(function() {

    $('.dead_center').dead_center();

});

Problem is that $('.dead_center') is only center on y-axis. Not x-axis!

Why this happens? Can’t spot my mistake.

Thanks in any advice!

Answer 1

The default for a div is 100% width. (It’s actually auto, but that’s how auto works for block-level elements). So, it is centered horizontally. It’s just taking up the whole horizontal area. Give the div a width, and you’ll see.