Flexbox nutzen um Inhalte zu zentrieren

Flexbox

Es gibt unzählige Methoden zum zentrieren von Inhalten per CSS. Mein Favorit ist momentan das Zentrieren per Flexbox.

Mit nur sehr wenig CSS lässt sich eine wiederverwertbare Regel definieren:

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

.center-wrapper > div:first-child {
    width: 80%;
}

Jetzt muss das HTML der Seite nur minimal erweitert werden:

<div class="center-wrapper">
	<div>
    	Inhalt
    </div>
</div>

Mehr ist nicht nötig.