Verschiedene effektive Möglichkeiten, Divs mit CSS zu zentrieren

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 */
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

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;
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

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%);
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

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;
}`}

{`<div class="centered">Isi di sini</div>`}

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;
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

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 */
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

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

Das obige ist der detaillierte Inhalt vonVerschiedene effektive Möglichkeiten, Divs mit CSS zu zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!