Best PracticesCSSEntwicklungWeb

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.

Tags

Marcel Melzig

Softwareentwicklung in C# .NET, ASP.NET MVC, PHP, Javascript, HTML, CSS, Java

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Back to top button
Close