CSS: Flex - jak wycentrować element poziomo i pionowo?

Żeby wycentrować element w pionie i w poziomie, możemy skorzystać z Flex'a.

Przykład znajdziesz pod tym linkiem.

Centrowanie poziomo i pionowo

HTML:

<div class="box">
Hello World!
</div>

CSS:

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border: 1px solid black;
}

Używając Flexa i reguł justify-content, align-items problem centrowania zostanie rozwiązany.