How to center elements in CSS (CSS Guide) 😜
Tags: css, tutorial, html
Published: 2021-02-17 13:57:52

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
{% codepen https://codepen.io/johncornea/pen/wvoJwLd %}

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.
{% codepen https://codepen.io/johncornea/pen/BaQRQBE %}

3️⃣ Block-level centering (multiple blocks) - to center them in a row, it's better to use the `display` property, instead of `auto`.
{% codepen https://codepen.io/johncornea/pen/BaQRmMw %}

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.
{% codepen https://codepen.io/johncornea/pen/poNPpjq %}

## Vertically
1️⃣ Single line centering (padding trick) - by setting the `padding-top` & `padding-bottom` equally, the element should be centered.
{% codepen https://codepen.io/johncornea/pen/QWGvazX %}

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.
{% codepen https://codepen.io/johncornea/pen/LYbyQGQ %}

3️⃣ Multiple lines centering (table trick) - by using the property `vertical-align`, we can force the element to behave like a table cell.
{% codepen https://codepen.io/johncornea/pen/poNPaEg %}

4️⃣ Multiple lines centering (flexboss) - as usual, `display flex`, set the `flex-direction` to `column` and center it. 
{% codepen https://codepen.io/johncornea/pen/XWNRZgg %}

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.
{% codepen https://codepen.io/johncornea/pen/XWNRZza %}

6️⃣ Block-level element (known height) - most of the time the height isn’t known, but if it is..
{% codepen https://codepen.io/johncornea/pen/rNWmJdz %}

7️⃣ Block-level element (unknown height) - by positioning the parent relative `top: 50%` and then the child absolute `translateY(-50%)`.
{% codepen https://codepen.io/johncornea/pen/GRNmQdb %}

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.
{% codepen https://codepen.io/johncornea/pen/wvodyZM %}

9️⃣ Flexbox - easiest way to center elements and in 90% of the situation Flexbox is all you need.
{% codepen https://codepen.io/johncornea/pen/ZEBKrNa %}

## 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.
{% codepen https://codepen.io/johncornea/pen/ExNmENO %}

### Grid
In the case you have one element to center, you can use this technique.
{% codepen https://codepen.io/johncornea/pen/oNYWqZK %}

### My Socials
[My Previous article](https://blog.corneaionut.com/fix-your-contact-form-once-and-for-all/)
[Dribbble](https://dribbble.com/JCornea)
[Behance](https://www.behance.net/ionutcornea)
[Twitter](https://twitter.com/jesuisJohn16)