How to center anything on the web
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.
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”.
Absolute positioned elements: use the same technique mentioned below for vertical block centering
That is it.
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:
- It have to applied to the element it self, not it’s parent.
- It only works with inline and inline-* elements.
- When used with HTML tables, it mimics the “align” attribute, in this case it has to be applied to the parent element.
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.
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.
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.
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.
If you still have questions about CSS centering, let us know in the comments.