Center a div in a div with margin: auto and flex

2018-10-30

Centring one item within another is one of the most common design patterns on the Web. Luckily, for many cases, it is quite simple to achieve this effect with display: flex. This is especially the case when you have two divs and you want one centred within the other.

Centred div

Outer div

<div class="outer">
  <div class="centred"></div>
</div>

.outer {
  display: flex;
}

.centred {
  margin: auto;
}