Designers seem to be troubled time and again while centering items in their layout. Well, no more! There are several ways to center items, be it horizontally or vertically or both, of which I present 13 unique ways categorically and in order of their simplicity.
Center elements Horizontally
Centering elements horizontally is a fairly easy thing to do. It can be done in 3 ways:
text-align:center; for Inline ElementsThis is the most simplest way to center elements horizontally and is fully supported by all browsers. All you need to do is add the style
text-align:center;
to the parent element and you have a result as shown below.
The caveat to this technique is that it works only with Inline elements like text, links, etc. For Block level elements we take the following approach.
Since block level elements are not inline, we can make them inline using flexbox and then centering the content.
.flex-center {
display: flex;
justify-content: center;
}
A live example to show you the same.
Fully supported across all browsers except IE10 and below which doesn’t support flexbox layout at all. Partial support exists for IE11, Nonetheless, there is good support with MS Edge.
Margin: 0 auto; for Block Level ElementsBy setting the left and right margins to a value of auto, we can have block level elements stack on top of each other.
.children {
margin: 10px auto;
}
If you wish to display the blocks inline, then you can simply use display:inline; on the child elements and use the text-centering technique on the parent.
.children {
display: inline-block;
}
.parent {
text-align: center;
}
The outcome of both of these (stacked items/ inline items) can be seen here
Center elements Vertically
Aligning items vertically can sometimes be a tricky thing to do. But there are several ways you can handle this depending on your layout and intended browser support.
The most easiest way to center elements vertically is by using the flexbox layout.
.flex-center {
display: flex;
flex-direction: column;
justify-content: center;
height: 200px;
}
If you don’t care about IE11 and below, this should be your first choice.
Yet, for some reason, if you are unable to use the flexbox, you can try the vertical-align property.
Vertical align works well with tables and with inline elements. For a table, the values of vertical-align are relative to the row height of the table and for inline elements, for instance, a line of text, the values of vertical-align are relative to the line-height of that text.
.parentElement {
display: table;
height: 120px;
width: 200px;
}
.childElement {
display: table-cell;
vertical-align: middle;
}
As you can see, the parent element is given a display: table; property so that the child element can be aligned like a cell.
Note that the Vertical-align property has no effect on block-level elements, like a paragraph inside a div. This method is well supported across all major browsers.
This technique works when you wish to vertically center a single line of text (text that does not wrap to the next line).
When you set the line-height, by default, equal spacing is given above and below the text making the text centered.
For this technique to function properly, it is imperative that the font-height be lesser than the line-height.
This technique works by setting an equal top and bottom padding. Assume that you have the following html layout.
<div class="parent">
<div class="child"></div>
</div>
If the parent element is 500px in height and the child element is 100px in height, then to have equal top and bottom padding, we would do
(500 – 100) / 2 = 200px.
So, if we set the top and bottom padding to 200px, our child element would be effectively centered. This can also be used with percentages.
The prerequisite to this technique is that you will need to know the height of the child and the parent element and will need to calculate the necessary padding values.
This technique works by making the child element’s position absolute and then using a negative transform in conjunction with the top property.
It works well when you do not know the height of the child container.
.parentElement {
position: relative;
}
.childElement {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
This is illustrated in the example below:
It is well supported across all browsers excepting Opera Mini.
For this method, we set the child element’s position to absolute. Then, the child element is made to stretch to all 4 edges of its parent by setting the top, bottom, right and left values to 0.
But this is not really possible since the child element is smaller than the parent element and so it cannot reach all 4 edges.
And then, when you set the margin as auto, is causes the opposite margins(left and right) to be equal, thereby displaying the child element in the center of the parent element.
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
And you can see the outcome of doing this below:
This method is fully supported across all browsers.
In this technique, we float an empty div to the left (or right) and give it a height of 50% of the parent div. That causes it to fill up the entire upper half of the parent element.
As we floated the div, it gets removed from the normal document flow requiring us to clear the child element i.e. clear: left(or right).
<div class="parent">
<div class="floating_div"></div> <!-- Div floats to left/right and sits atop the child-->
<div class="child">Vertically Centered</div> <!-- We clear the float for child-->
</div>
Here’s an example in action:
The downside to this method is that you must know the height of the child element and of course you have an empty div floating around! Nonetheless, it is supported by all the major browsers.
Center elements Horizontally and Vertically
I think this is the most effective and quickest way to center in both directions. All you need to do is use the following two properties of the flexbox layout
.center_child {
display: flex;
justify-content: center;
align-items: center;
}
And Viola!
Again, as far as support is concerned, < IE10 will definitely give you pain ITA! Otherwise, all other browsers are a big GO!
This technique is similar to one of the techniques we used in vertical centering. There we used transform: translateY(-50%); for vertical centering. All we gotta do is to use transform-translate property in both directions. The rest stays the same.
.parent {
position: relative;
}
.child {
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
And you have a perfectly centered element on your screen.
Very useful to center elements with an unknown height. Great browser support.
In this technique, we set the position of the child to absolute with its top and left properties equal to 50%. Now depending on the height of the parent and the child, we adjust the left and top margins to have it centered. It would look something like this:
.parent {
position: relative;
height: 200px;
}
.child {
width: 200px;
height: 100px;
margin: -70px 0 0 -120px;
position: absolute;
top: 50%;
left: 50%;
}
There is great cross browser support.
Although, to use this method, remember that you need to know the height of the parent and the child element and need to do some math to calculate the margins.
Additional Resources and References
Vertical centering using CSS — Enlists a few additional methods.
CSS tests and experiments — Here you’ll find several vertical centering experiments.>
Centering CSS guide — Shows several examples as in this article.
Centering vertically in css — covers all major methods for vertical.>
Vertical Aligning with css — Covers the absolute position & transform method
Absolute horizontal and vertical centering — Show advantages & disadvantages of different methods.
Flexbox centering — Good resource for using flexbox centering
Stackoverflow — Horizontal centering using text-align
css generator — Generate css with cross browser support
Vertical Aligning with css — Points out the Absolute Position & transform method with a fix for blurry elements