Inhalte per CSS mit Flexbox zentrieren

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.

114 Worte