Step 1 — One line vertical-align:middle

This one is quite easy. Let’s say you set up a nice graphical container for your text but when you add the text, it just sticks to the top of your container — not a very nice visual effect. To center it vertically, simply specify the line-height for your text the same height as that of the container’s.

Things get a bit more complicated when you have more than one line of text. Stick around and we’ll fix this too.

Step 2 — Multiple lines (one line) vertical-align:bottom

An absolute positioned div inside a relative positioned one can basically be placed anywhere you want inside the parent div. So we’ll just use this setup and absolute position a div with bottom:0 within a relative positioned one. The relative positioned div inherits its height from its parent.

Step 3 — Multiple lines vertical-align:middle

This must be the trickiest part of the vertical-align functionality to be achieved with CSS. If we were to just use the trick from Step2 and set the absolutely aligned div to top:50% or bottom:50%, this would align the top part of the text (or its baseline) at the middle — so its not really middle vertically aligned. We could use the actual vertical-align property but it only works for inline elements, so we should use display:table and display:table-cell for the enclosing divs.

All nice and easy but for one problem: IE — it doesn’t recognize display:table. Nevertheless that shouldn’t stop us. We’ll use this setup and achieve the desired result even though only for last-generation browsers.

So, how can we trick IE in vertically aligning the text? We’ll use its bugs against it. IE has some issues with rendering relative and absolute positioned elements. I won’t go into details on this specific bug right here as I don’t want to complicate things even more. The important thing to remember is the solution to this practical problem: positioning a relative div into an absolute one into a relative one once again. Weird, huh? Let me try and explain a bit better: we already have the relative positioned container from the last setup where we want to vertically align the text. Inside it we’ll place an absolute positioned div at top:50%, and inside this one another div relatively positioned at top:-50%. Ta da! It works even for IE.

So now, let’s combine the two solutions and create one that works on every browser. We’ll use the attributes for the modern browsers in a way that IE can’t read them (with some help from the direct child selector), and then, also add the code for IE.

That’s it. Have fun working with vertical align and CSS layouts, and always remember: there’s not been yet a layout that couldn’t be coded with CSS.