neggs vertical-align quirk

"vertical align: middle" using only css, no tables

By neggl@web.de, Last change: 2003-05-12

Trying to replace tables as a means for layouting pages (and thus using only css) made me dig really deep, both in my brain and in the www. So I am trying to collect a list of solutions, for discussion or for you to use. If you've got any comments on this please let me know.

See also the usenet thread on comp.infosystems.www.authoring.stylesheets
2003-05-12 09:00:06 PST: vertical-align without tables, just using css

The problem

Place a div inside another div so that the inner div's center is exactly in the center of the outer div. Both divs should not have a fixed size, so the whole placement must be dynamically.
Having read unnumerated postings on usenet I came to the following conclusions:

display: table or table-cell [NS/Moz,Opera]

CSS2-Def provides the "display: table" and "display: table-cell" properties in conjunction with "vertical-align: middle". Unfortunately IE does not support that value, so it is practically useless. But keep an eye on this, as soon as IE supports that value, all our problems are solved.

display: table [Opera]

#displayTable {
  display: table;
  vertical-align: middle;
}

Text

display: table-cell [Opera, NS/Mz]

#displayTableCell {
  display: table-cell;
  vertical-align: middle;
}

Text

margin: auto;

Some say: "Set padding-top and padding-bottom of the outer div to "auto", and the inner div is centered.". I read this a hundred times on the usenet, but this never worked for me. Am I getting something wrong?:

#autoRed {
  margin-top: auto;
  margin-bottom: auto;
}

Text

margin: 50%;

The green box's top is centered in Op/Ns/Mz when you set the margin-top and -bottom for the inner div to 50% (that is 50% of the outer div, which should center the inner div).

Comment by Lasse Reichstein Nielsen:
It doesn't center, as a top and bottom of 50% leaves no space for the text, i.e., the block is overconstrained. The missing space is taken from the bottom margin.

That's true. But here on my IE6 it's even more worse: the red div is as high as the viewport (but at least the green div is centered ;-) This has to be a bug, because "margin" relates to the parent elements height, which is the red div and not the body:

#autoGreen50 {
  margin-top: 50%;
  margin-bottom: 50%;
}

Text

line-height

If you know the height of a div and just want to place one line of text in the center (like in a button) you can use line-height to set the height of the div, and the text will be (more or less) centered vertically:

#lineHeightRed {
  line-height: 100px;
}

Text Text Text

fixed size of inner element

(Submitted by Lasse Reichstein Nielsen)

Lasse: "There is also a solution for when you know the size of the centered block. But then again, if you know the size, how hard can it be to position it :)"

negg: "Yeah, and the text is still not in the middle of green..." #sizedGreen { position:absolute; top:50%; height:50px; /* fixed height */ margin-top:-25px; /* half height */ }

Text

-50% of 50% = center [IE]

Inspired by wpdfd.com I thought I found a solution for vertically aligning a div in another div, that works in IE also. But I was wrong...Opera7 and NS7/Mz do not render as I expected:
The idea is to absolutely position a div (blue) at "left: 50%" and "top: 50%" so that its upper left corner sits exactly in the middle of its parent element (in this case "red").
Then I position another div (green) inside the blue div at "left: -50%" and "top: -50%". As blue's size is exactly the same as green's size (blue is widened by green as green sits inside blue) 50% of blue = half the size of green, which brings greens center exactly into grey's center.
But while NS/Mz and Opera place green horizontally correct, they don't vertically. Why is this so???

#fiftyBlue {
  position: absolute;
  top: 50%;
  left: 50%;
}

#fiftyGreen	{
  position: relative;
  top: -50%;
  left: -50%;
}

Text here

wpdfd.com

Look at this site, that guy has another solution. Works good as far as I can see...

Any other solutions?

Do you have any other solutions? Write me, I'll put them here.