[HTML/CSS] - Vertical centering

[Zxian]

I'm wondering if anyone has any CSS-only methods of making a div of a fixed height appear vertically centered in the page. I've found methods that make it appear like this, but most of them use some sort of 25/50/25 rule (percentages here) to make the "middle section" appear in the center.

Any ideas?

[n7Epsilon]

How about something like this:

.mydiv{
	background-color: black;
	color: white;
	position: fixed;
	left: 10em;
	top: 10em;
	right: 10em;
	bottom: 10em;
	height: 100px;
}

To make its height fixed, i overrode the auto height adjustment with height: 100px. And if you change position to absolute instead of fixed, it will be like a normal div, else now it is fixed in the middle.

[ripken204]

you mean that this doesnt work?

div.whatever 
{ 
vertical-align: middle; 
}

[Zxian]

@n7epsilon - thanks for the reply, but it doesn't seem to work for me in Opera or IE7. I had thought of something like that, but sending conflicting information about an object usually ends up with strange cross-browser performance.

@ripken204 - nope... try it yourself.