Problems with display: table-cell;

Vertical centering of content is something that took a giant step backwards with the departure from table-based layout. The CSS-property vertical-align is limited and in most cases does nothing more than centering inline content vertically inside its' line.

With one line of content, you can set a large line-height, f.ex. 100px and vertical-align: middle; will center your content vertically within the 100px, but this only works when you have one line.

Another solution can be used if you have content with a known height within a container with known height. A combination of margin and position can vertically center your content. But as said, you need to know the height of both your content and the container outside your content.

The CSS "solution"

CSS has a property, display, that can take the value table-cell. And that gives us the ability to vertically center content like we used to in the old days. And now that IE7 is on its way to extinction, it can actually be used since it is supported in IE8 and of course all other relevant web browsers.

But, as we moved away from table-based layouts, we also moved to a better solution that will lose some of its advantages when we apply display: table-cell. It does not only give us proper vertical centering, it also gives us the rest of the table-cells properties.

• No margin
• No positioning
• Cant' be floated
• Width depends on content
• Dictates html source order

Because of this, most incidents of "I will use display: table-cell to achieve true vertical centering" ends up with an array of hacks to get around all these limitations.