CSS – vertical-align absolutely anything without table-cell

tut-vertalignSometimes you come across a problem with the limitations of CSS; usually legacy problems caused by the horribly clunky reign of Internet Explorer. Cascading Style Sheets (CSS) are, however, becoming more refined with the introduction of some very cool abilites from CSS3 and HTML5 making our lives infinitely easier.

The Solution

This particular issue deals with vertical align not working which has plagued me for years, and today after learning the solution I have decided to tell as much of the world as I can in celebration!

So to vertically align pretty much anything, within whatever container it happens to be in, just use the CSS below on your desired class.

.class {
position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}

So what is this actually doing?

position: relative; Allows us to move around a child-element from it’s current location by adding top, right, bottom, left coordinates.

top: 50%; Moves the child elements’ top point halfway down relative to the parent container.

transform: translateY(-50%); Translate means move, and this particular rule moves up the child-element by half it’s own height. The minus sign moves it negatively (up) rather than positively (down).

Making the parameters, dynamic rules by using percentages instead of fixed is the power of this method with particular emphasis on the transform parameter. This way it can be applied to objects where the container has a dynamic size, like a 100% width slider image for example, which would normally create a problem where it has a variable width and height, when the browser is resized, but using the class CSS above would allow the child elements (for example a caption container) to remain vertically centered regardless of how high the image container became. Which is how I discovered this cheeky snippet.

Why is this method better than using display: table-cell?

The display: table-cell; property was, and still is, the only simple way to achieve controlled vertical alignment in the past, and up until yesterday was how I accomplished it. But it’s a hack. It’s a way of fooling the browser into using table sizing and layout properties on a div tag.

These types of code hacks are generally first introduced out of necessity, and will eventually, as such, become deprecated, and there is no point utilising technology that will at some point in the future, no longer be acceptable W3C standards. It will just cause you a tonne more work to do when your clients website layout unexpectedly breaks. Worst of all though is the fact that most of the time display: table-cell; doesn’t even work correctly! It works if you use line-height:0; but not with float:left; but then float can be used but not with absolute or relative positioning….GYARRR! There’s probably been a few billion man hours of time lost purely from developers attempting to get something to sit vertically centred on a page. Hopefully those days are now over.

If you have any questions, comments or improvements please get in touch. I’ll be more than happy to receive them and will reply promptly. My email is info@mjacksondesign.co.uk or please use the forms on the contact page.

Happy Coding 🙂

, , , ,

No comments yet.

Leave a Reply