A quick review of how to centre elements or blocks using FlexBox in CSS

Generally we know lots of ways to centre elements of blocks anything in CSS using FlexBox. In this article we will review centring elements with examples.

Centre elements horizontally using FlexBox

Whenever we have multiple columns of blocks in one row and we need to centre elements horizontally FlexBox is the best option. I use some pens from CSS tricks which you can read the full article here as well.

Here is a pen of multiple blocks being centred in x axis:

And this is the code to make our blocks centred:

.flex-center {
  display: flex;
  justify-content: center;

Using justify-content: center; in a FlexBox container we aligned items horizontally centred. Also we did notice that texts on the top has been centred inside their block using text-align: center; We use that to make any text centred.

Centre elements vertically using FlexBox

Vertically centre elements is really easy in FlexBox. Practically we just need a few lines of code:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;

Therefor we will have items vertical changing the flex-direction to column:

Centre in both directions using FlexBox

Typically this is what we are looking for. Centre everything. And the magic comes true pretty easily using the magic Box. The Flexible one!

.parent {
  display: flex;
  justify-content: center;
  align-items: center;

Except for justify-content property for horizontal alignment we need to use align-items property to centre things vertically:

Perfect balance. We can also use grid to centre elements :

body {
  display: grid;
  place-items: center;
  height: 100vh;

According to MDN the CSS place-items shorthand property sets both the align-items and justify-items properties. The first value is the align-items property value, the second the justify-items one.

But this property is a work in progress so if you want to use gris use the seperate properties for now.

Therefor we now have centred elements in CSS using FlexBox which is easy and complete. Of course in cases like texts that we can use just text-align: center; we should and there is no need to flexBox. We need to analyse the use case and decide accordingly.

Thank you for reading.

© 2020
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.