Vertically centering Div's

[verkevinmanering69err455]

I was working on creating a vertically centered div. I did find a way however which sadly only works in IE. Dose anybody know how to vertically center a div which in most browsers?


Heres the code for IE DIV Centering:

Code: Select all

#containerbg {
    position:absolute;
    _top:-50%;
    display:table-cell;
    vertical-align:middle;
    background-color:#FF6633;
    width:100%;
}

[masonbarge]

The traditional method of handling IE6 and Firefox/others was something like:
body: {text-align: center; margin: 0 auto;}
div.wrap {margins: [whatever] auto; text-align: left;}

setting the parent div/element to left/right margin "auto" centers it in most browsers. For IE < 7, you have to center the text in a parent, then align it back to left in the target div.

Also, at the top of your css, the following code prevents problems:

Code: Select all

* {
margin:0;
padding:0;
}

[Ryan Fait]

Mason seems to have misunderstood the question. That's for horizontal centering. And he should've clarified. The * { margin: 0; padding: 0; } won't prevent problems, it will simply remove all margin and padding from every element on the page. This is sometimes helpful because different browsers have different default margin and padding settings. It is by no means necessary, however.

verkevinmanering69err455:

The code you posted is rather poor. Something like the following would work and validate.

Code: Select all

#containerbg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 200px;
    margin: -100px 0 0 -200px; /* margin: -half-height 0 0 -half-width; */
    background: #f63;
}

Vertical align is poorly supported as I recall, so you might as well not even use it. I could be mistaken on that point because I never use it. If you don't want horizontal centering like I've posted, remove left: 50%; and set the margin to: margin: -100px 0 0;.

[moojoo]

http://www.newguyinennis.com/samples...centering.html

http://www.newguyinennis.com/samples...ing_fluid.html