Einführung

Es gibt mehrere Möglichkeiten, ein div-Element mithilfe von CSS in der Mitte zu positionieren. Hier sind einige gängige Methoden:

1. Flexbox verwenden

Flexbox ist eine der beliebtesten Methoden zum horizontalen und vertikalen Zentrieren von Elementen.

{` .container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Contoh: memposisikan div dalam tinggi viewport */
}`}

{`

    
Isi di sini
`}

2. Verwenden des Rasterlayouts

CSS Grid bietet auch eine einfache Möglichkeit, Elemente zu zentrieren.

{`.container {
    display: grid;
    place-items: center; /* Center horizontally and vertically */
    height: 100vh;
}`}

{`

    
Isi di sini
`}

3. Verwendung der absoluten Position und Transformation

Diese Methode verwendet position: absolute und transform, um das Element in der Mitte zu positionieren.

{`.container {
    position: relative;
    height: 100vh;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}`}

{`

    
Isi di sini
`}

4. Verwenden der automatischen Marge

Diese Methode wird verwendet, um Elemente horizontal in der Mitte mit automatischen Rändern zu positionieren. Für die Vertikale sind jedoch zusätzliche Tricks erforderlich.

{`.centered {
    width: 200px; /* Contoh lebar */
    height: 200px; /* Contoh tinggi */
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}`}

{`
Isi di sini
`}

5. Textausrichtung und Zeilenhöhe verwenden (nur horizontale Zentrierung)

Dies funktioniert gut für Text- oder Inline-Block-Elemente.

{`.container {
    text-align: center; /* Horizontal centering */
    line-height: 100vh; /* Contoh tinggi viewport untuk vertikal centering */
}
.centered {
    display: inline-block;
    vertical-align: middle; /* Jika digunakan dengan elemen lain */
    line-height: normal;
}`}

{`

    
Isi di sini
`}

6. Verwendung der Tabellenanzeige

Dies ist eine ältere Technik, aber sie funktioniert immer noch.

{`.container {
    display: table;
    height: 100vh;
    width: 100%;
    text-align: center; /* Horizontal centering */
}
.centered {
    display: table-cell;
    vertical-align: middle; /* Vertikal centering */
}`}

{`

    
Isi di sini
`}

Abschluss

Um Elemente sowohl horizontal als auch vertikal in der Mitte der Seite zu zentrieren, sind die Methoden Flexbox und Grid am einfachsten und modernsten. Abhängig von den Anforderungen des Projekts können jedoch auch andere Methoden nützlich sein. Vielen Dank, dass Sie diesen Artikel bis zum Ende gelesen haben