Many people who wrote HTML back in the day remember the valign=”middle” tag from tables.  It was always easy to handle centering in tables.  In divs and boxes, however, it’s not so straight forward.  In face, the only somewhat relevant css tag is “vertical-align.”

Of course, many many people completely misunderstands what the vertical align tag is for.  It has nothing to do with vertical centering within an object.  It refers to how side-by-side objects center related to one another.

This article really has nothing to do with what vertical-align means, but it is certainly relevant to the above solution.  If you’re having trouble with vertical-align, google it and you’ll find a bajillions explanations.

So, the little snippet of brilliance I want you to see here is that, in fact, CSS DOES provide a way to do vertical centering.  What?  Didn’t you just say that it doesn’t?  I did.  But there is a pretty easy exploit, thanks to vertical-align.

So without any further buildup, here is the solution:

1.)  Use a strict doctype, because if you don’t, you’re an idiot.    j/k — if you don’t understand, check google.  I personally prefer HTML 1.0 strict, but use as you wish.

2.) Create a “div” element — any size, but definitely use a set width and height (px, em, % — it’s irrelevant).  It should have the css style “text-align: center; white-space: nowrap;” (I’m presuming, of course, that you want horizontal centering as well.  If not, substitute left or right — it makes no difference.)

3.) Create an element inside the div with the following style:  “vertical-align: middle”  Woohoo we’re done right??  No … not yet.  The object now has to be vertically centered to something.  And, intuitively, if somehow there were an object that is 100% in height and we were vertically centered to that, we’d be in business.

HEY WAIT A MINUTE!!!

4.) Now create a div inside your element with the following css style:  “display: inline-block; height: 100%; width: 0px; vertical-align: middle;”.

<div style="width: 150px; height: 90px; position: relative; text-align: center; background-color: pink; white-space: nowrap;">
<div style="display: inline-block; height: 100%; width: 0px; vertical-align: middle"></div>
<div style="width: 22%; height: 11%; background-color: skyblue; vertical-align: middle;"></div>
</div>

That will give you a blue box horizontally and vertically centered inside the main div.

You may ask yourself how it’s any better than just using margin-top: 44%; — and it’s not for a fixed width object, but it will work for a VARIABLE WIDTH OR HEIGHT object. (Think images!)

So there you go. That’s the solution. Exploit the one little vertical align ability CSS gives you — vertical align with the adjacent object that is 100% tall, bam — fluid vertical centering with variable dimension.