关于CSS垂直居中方案

Demo:: vertical align: middle

Table of centents:

1. Single line countainer with/without a fixed height
2. Align multi-line container which does not have a fixed height
3. Simulating table layout in container with a fixed height
4. IE's solution
5. A perfect compounded sample

Case One: Single line countainer with/without a fixed height

If you only want to display a container which only holds a single line of text, you can set line-height property to height property, then set overflow to hidden.

Sample:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Core code:

.middle-demo-1{
 height: 4em;
 line-height: 4em;
 overflow: hidden;
}

Notes:

1. I strongly recommend you use relative size in height and line-height property. Why? You can simply set the font size larger if your browser support it. When it gets large enough, you will see the countainer is stretched and the height is no longer equal to line-height property, thus, the layout is messed up. Using relative size as em, ex or % will let your countainer stretch with the content.
2. overflow: hidden is a must. Why? Same as above. Just ensure height and line-height are always equal.

Pros:

1. Fits in both block elements and inline elements.
2. Capable of all 5th-gen browsers.

Cons:

1. Text length is limited. Max with only one line.
2. Does not work well on none text contents such as images and objects.

Back

Case Two: Align multi-line container which does not have a fixed height

In this case, we should simply set a pair of fixed equivalences to padding-top and padding-bottom attribute. It works on both IE and non-IE browsers.

Sample:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.

Core code:

.middle-demo-2{
 padding-top: 24px;
 padding-bottom: 24px;
}

Pros:

1. Fits in both block elements and inline elements.
2. Works on none text contents as fine as text contents.
3. Capable of all 5th-gen browsers. Might need a little tune-up for the box model bug of IE5 though.

Cons:

1. You can not assign height in this solution.

Back

Case Three: Simulating table layout in container with a fixed height

CSS offers a set of very convenient display atrribute values called display: table, display: table-row, display: table-cell and other display values begin with table-. It offers a way to simulate table layout in all elements. As a result, any element with display: table-cell, vertical-align: middle and a fixed height will display exactly like a table cell.

Sample: (You may not be able to view the effect on IE)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.

Core code:

.middle-demo-3{
 display: table-cell;
 height: 300px;
 vertical-align: middle;
}

Notes:

1. display: table-cell must work with other elements with display: table value sets in order to form a literal table. Or it might cause unexceptable bugs.
2. Sadly IE series (including the latest IE 7 beta) does not support any of display: table values, so it won't work in IE.

Pros:

1. It has the most perfect render for vertical-align: middle align.

Cons:

1. It only works in latest versions of non-IE browsers, such as Mozilla, Firefox, Netscape 8, Opera 8, and Safari.

Back

Case Four: IE's solution

Since IE is a lame browser when it comes to ANYTHING, so you can't use the solution above simply because IE does not recognize it at all. However, there has been nothing yet you can not code with CSS if you have already coded it with table. It even offers you possibility to layout your page that tables can not do!

So what's the solution for IE? Like what we always do: Hit IE's back with the BUGS it offers!

Sample: (You are able to view the correct result only on IE)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.

.middle-demo-4{
 height: 300px;
 position: relative;
}
.middle-demo-4 div{
 position: absolute;
 top: 50%;
 left: 0;
}
.middle-demo-4 div div{
 position: relative;
 top: -50%;
 left: 0;
}

See? Don't ask me why it worked. This hack is based on years of study in IE's own stupid layout model and it works very well, even in IE5 given the box width hack. I won't tell you the theory behind all these. It's my top secret, with which I solved a lot of other cross browser layout problems, and I'm not going to share it with you. But you are free to use this IE hack It's kinda handful in most occassions.

Pros:

1. The only perfect vertical align method in IE. It works even better then add automatic paddings.

Cons:

1. After all it's a CSS hack. We can avoid it if not for IE.

Back

Case Five: A perfect compounded sample

Here's the perfect compounded solution on vertical centering that works on almost all latest browsers.

Sample: (This works on almost all browsers)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.

I'm not going to give you the full code of this one. But it's not difficult to write it yourself, with the solution of case 3 and 4, and a little knowledge in IE/non-IE CSS hackers. And actually the hacking style is not limited, so I don't want to force you to use my hacking style neither. Stop being lazy, and write the code yourself!

Browser capability:

1. Works on: IE6+, Mozilla 1.5+, Netscape Navigator 7+, Opera 7+, Firefox 1.0+ and Safari 1.0+
2. On IE5, you might need to apply the box model hacker to make the height correct.
3. Untested: WebOmini, Konqueror.
4. Fails on: Other browsers not reffered in the list above.

Back

Copyright © Spenser Lee, 2006 Liberty Studio