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

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;
}
Color scheme: