Hardest concepts in “programming”? Regular Expressions, Object-Oriented Programming or Recursion, hack no! Centering elements in CSS!
We all remember our start in CSS and what a nightmare it was to center things with CSS. That’s why the purpose of this tutorial is to clear out this bad dream and help you figure out how to center elements in CSS in different ways, horizontal and vertical.
We live in great times dear fellows, Flexbox came around and helped a lot by making it really easy to center things with CSS.
Grid is great as well, however, it’s complex, endless possibilities that would require a dedicated article for it. However, I will provide a simple Grid example as well.
1️⃣ Inline centering – possible within a parent element
2️⃣ Block-level centering – easily done by setting the
auto. It is important to set a specific width (less than your screen), otherwise, it would take the whole width of the screen and the centering won’t work.
3️⃣ Block-level centering (multiple blocks) – to center them in a row, it’s better to use the
display property, instead of
4️⃣ Block-level centering (multiple stacked blocks) – in the case where you want to stack multiple blocks on top of each other, the auto property will do just fine.
1️⃣ Single line centering (padding trick) – by setting the
padding-bottom equally, the element should be centered.
2️⃣ Single line centering (line-height hack) – it works well if the
height of the parent is equal to the
line-height of the child.
3️⃣ Multiple lines centering (table trick) – by using the property
vertical-align, we can force the element to behave like a table cell.
4️⃣ Multiple lines centering (flexboss) – as usual, display
flex, set the
column and center it.
5️⃣ Multiple lines centering (ghosting) – the “flexboss” method works fine only if the parent has a fixed height. If the height it’s not specified, then we can use the technique called “ghost element”. A full-height pseudo-element is placed inside a container and the text is vertically aligned with it.
6️⃣ Block-level element (known height) – most of the time the height isn’t known, but if it is..
7️⃣ Block-level element (unknown height) – by positioning the parent relative
top: 50% and then the child absolute
8️⃣ Block-level element (‘stretch that height’) – this technique is good if you would like to stretch the height of the element. It can be implemented using the table cells.
9️⃣ Flexbox – easiest way to center elements and in 90% of the situation Flexbox is all you need.
Flexbox vs Grid
I won’t dive too deep into this subject because the purpose of this article is to learn how to center things in CSS.
The most important difference between Flexbox and Grid is that, Flexbos is used to make magic in one dimensional layout (row / column at a time) . While Grid was designed for two-dimensional layout (rows & columns in the same time).
Know that we understand a little better the difference between the two, I will provide two more examples.
To center in both directions, use
In the case you have one element to center, you can use this technique.