ansaurus

Question

Creating a vertically and horizontally centered html div

Answer 1

A:

I was surprised to observe that Google uses the <center> tag to effect their horizontal centering. This seems odd to me, given their leadership in other areas ...

Robusto 2010-09-13 18:28:16

Yeah, I have observed that too. I would prefer to avoid it as it has been deprecated. http://www.w3schools.com/tags/tag_center.asp

Amrit 2010-09-13 18:36:27

Answer 2

A:

You can use jQuery to set it to perfectly.

jQuery

$(window).resize(function() {
    var wh = (($(window).height()-$('#center').height())/2)+'px';
    var ww = (($(window).width()-$('#center').width())/2)+'px';
    $('#center').css({
        top: wh,
        left: ww
    });
}).resize();

CSS

#center {
    border: 1px solid black;
    position: absolute;
    width: 50px;
}

If you don't care about perfectly vertically centered, you could do:

#center {
    border: 1px solid black;
    margin: 0 auto;
    position: relative;
    width: 50px;
    top: 45%; /* or whatever % looks 'right' */
}

Robert 2010-09-13 18:37:33

Thanks Robert, this is what I was looking for.

Amrit 2010-09-14 06:35:03

ansaurus

tags:

views:

answers:

Creating a vertically and horizontally centered html div

jQuery

CSS

related questions