Die perfekte Zentrierung

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 48 von 76.

In CSS ist das Erreichen der „perfekten Zentrierung“ – das horizontale und vertikale Zentrieren eines Elements innerhalb seines Elternelements – eine häufige Herausforderung beim Layout. Flexbox bietet eine elegante und unkomplizierte Lösung für dieses Problem. Durch die Kombination der Eigenschaften justify-content und align-items können Sie ein Kind-Element problemlos innerhalb seines Flex-Containers zentrieren, unabhängig von der Größe des Kind- oder Elternelements.

So erreichen Sie die perfekte Zentrierung mit Flexbox:

.container {
    display: flex; /* Macht das Elternelement zu einem Flex-Container */
    justify-content: center; /* Zentriert das Kindelement horizontal entlang der Hauptachse */
    align-items: center; /* Zentriert das Kindelement vertikal entlang der Querachse */
}

Damit diese Technik effektiv funktioniert, stellen Sie sicher, dass der Flex-Container eine definierte Höhe hat. Wenn die Höhe des Containers nicht explizit festgelegt ist, wird er nur so hoch wie sein Inhalt sein, und die vertikale Zentrierung ist möglicherweise nicht erkennbar.

Hier ist ein Beispiel dafür, wie man diese Technik in HTML verwendet:

<div class="container">
    <div class="child">This is centered</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Legen Sie eine spezifische Höhe für den Container fest */
    border: 1px solid black; /* Optional: Fügen Sie einen Rahmen zur Visualisierung hinzu */
}

.child {
    padding: 20px;
    border: 1px solid red;
}

In diesem Beispiel hat das .container Element eine Höhe von 300px, und das .child Element wird darin sowohl horizontal als auch vertikal perfekt zentriert.

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit einem übergeordneten Bereich (<div>), der einen untergeordneten Bereich (<div>) enthält. Ihre Aufgabe ist es, Flexbox zu verwenden, um den untergeordneten Bereich perfekt innerhalb des übergeordneten Bereichs zu zentrieren. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die das <div>-Element mit der Klasse parent anspricht.
Setzen Sie die Eigenschaft display des .parent-Elements auf flex, um es in einen Flex-Container zu verwandeln.
Setzen Sie die Eigenschaft justify-content des .parent-Elements auf center, um das Kind horizontal zu zentrieren.
Setzen Sie die Eigenschaft align-items des .parent-Elements auf center, um das Kind vertikal zu zentrieren.
Geben Sie dem .parent-Element eine height von 200px, um sicherzustellen, dass die vertikale Zentrierung sichtbar ist.

Spickzettel

Um ein Element mit Flexbox sowohl horizontal als auch vertikal perfekt zu zentrieren, kombinieren Sie justify-content: center und align-items: center:

.container {
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center; /* Vertikal zentrieren */
    height: 300px; /* Höhe für sichtbare vertikale Zentrierung definieren */
}

Der Flex-Container muss eine definierte Höhe haben, damit die vertikale Zentrierung sichtbar wird.

Probier es selbst

<html>
<head>
    <title>The Perfect Center</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">Center Me</div>
    </div>
</body>
</html>