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.
Horizontally
1️⃣ Inline centering – possible within a parent element
2️⃣ Block-level centering - easily done by setting the margin-left and margin-right to 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 auto.
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.
Vertically
1️⃣ Single line centering (padding trick) - by setting the padding-top & 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 flex-direction to 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 translateY(-50%).
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.
Flexbox
To center in both directions, use justify-content and align-items properties.
Grid
In the case you have one element to center, you can use this technique.
Top comments (0)