If you have been developing websites for a while, you know how often and tricky CSS centering might be. I faced this problem myself, specially with vertical centering. Below I will showcase the methods I use to center elements both horizontally and vertically.

Horizontal Centering

Inline or inline-block elements: apply “text-align: center” to the parent.

Block elements: apply set width, either fixed or fluid then give the element “margin-left” and “margin-right” of “auto”.

See the Pen Horizintally centered block element by Rafael Youakeem (@Youakeem) on CodePen.

Absolute positioned elements: use the same technique mentioned below for vertical block centering

That is it.

Vertical Centering

Here comes the tricky part.

The vertical-align property

One of the most miss understood properties of CSS is the “vertical-align“, I lost count of how many hours I spent pulling my hair off because it didn’t work when I “thought” it should. Here is a list of what I figured out:

1. It have to applied to the element it self, not it’s parent.
2. It only works with inline and inline-* elements.
3. When used with HTML tables, it mimics the “align” attribute, in this case it has to be applied to the parent element.

See the Pen xwmewX by Rafael Youakeem (@Youakeem) on CodePen.

Head over to css-tricks for more information about the property.

The one liners

There are  situations where you want to make just one line of text (or any inline-block element) appear vertically centered, there is two ways I use to make this happen:

Equal “padding: giving the element equal top and bottom padding gives the impression or vertical centering.

Using “line-height”: as with the padding method, giving the element a “line-height” equal to it’s parent height will make it appear vertically centered. note that this method will not work with any element that breaks into multiple lines.

Block Elements

So far, I’ve covered how to vertical align inline elements (including inline-*), continue reading to see how to do the same for block elements.

Known height elements

It’s not so common for web elements to be of a fixed height because of multiple reasons like text re-flow, width changes or fixed ratio elements like images. However, If you wanna center an element with a known height, here is how to do it:

The idea is that we space the element 50% from the parent’s top, and then push up the element 50%, that way the center of the element is at the same point of the parent’s.

See the Pen zvyXqz by Rafael Youakeem (@Youakeem) on CodePen.

Unknown height elements

Using the same technique, except we are going to use the CSS3 property “transform” to up the element half of it’s width.

See the Pen Block vertical centering – Unknown height by Rafael Youakeem (@Youakeem) on CodePen.

Note that both theses techniques also work with horizontal centering for “position: absolute” elements. We just need to use the “left” or “right” property and “translateX” instead of “top” and “translateY”.

The “transform” property is not compatible with IE8 or lower

The “Ghost element” technique

If absolute positioning is not an option and/or you need to support IE8, the ghost element comes to the rescue. I first knew about this approach from Chris Coyier’s “Centering in the unknown“.

The Idea behind it is simply creating a “ghost” element using the “:before” pseudo element that takes the whole height of it’s parent and then vertical align the element to it.

See the Pen Centering in the Unknown by Chris Coyier (@chriscoyier) on CodePen.

If you still have questions about CSS centering, let us know in the comments.