So zentrieren Sie HTML vertikal

Für Front-End-Entwickler ist die horizontale Zentrierung relativ einfach, die vertikale Zentrierung ist jedoch ein schwierigeres Problem. In diesem Artikel besprechen wir, wie man Elemente in HTML vertikal zentriert.

Generell gibt es viele Möglichkeiten, ein HTML-Element vertikal zu zentrieren. Im Folgenden untersuchen wir einige dieser Methoden.

1. Verwenden Sie Flexbox

Flexbox (flexibles Box-Layout) ist eine der neuesten Layoutmethoden von CSS3 und eine äußerst praktische Zentrierungsmethode. Die Hauptidee von Flexbox besteht darin, eine elastische Box im Container zu erstellen und dann die Eigenschaften der elastischen Box zu steuern, um eine horizontale und vertikale Zentrierung zu erreichen. Schauen wir uns an, wie man mit Flexbox eine vertikale Zentrierung erreicht:

HTML-Code:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS-Code:

.container {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

In diesem Beispiel Wir legen zunächst eine Höhe für den Container fest, stellen dann den Anzeigemodus des Containers auf Flexbox ein und verwenden die Eigenschaften justify-content und align-items, um das Element vertikal und horizontal zu zentrieren. Es ist zu beachten, dass diese Methode nur für die einfache vertikale Zentrierung funktioniert.

2. Absolute Positionierung verwenden

Absolute Positionierung ist eine häufigere Methode. Mithilfe der absoluten Positionierung können Sie ein Element vertikal relativ zu seinem übergeordneten Element zentrieren. Die konkrete Implementierung ist wie folgt:

HTML-Code:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS-Code:

.container {
    position: relative;
    height: 300px;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

In diesem Beispiel legen wir zunächst die Position für fest Container: Relative, legen Sie dann Position: Absolute für das untergeordnete Element fest und setzen Sie das Top-Attribut auf 50 %. Auf diese Weise wird das untergeordnete Element vertikal zentriert. Am oberen Rand dieses Elements befindet sich jedoch etwas zusätzlicher Leerraum. Um diesen Leerraum zu beseitigen, verwenden wir transform: translatorY(-50 %), wodurch er um die Hälfte seiner Höhe nach oben verschoben wird, sodass das Element genau vertikal zentriert ist.

3. Table-cell verwenden

Die Verwendung von table-cell entspricht der Konvertierung von HTML-Elementen in Tabellenelemente. Mit der Tabellenzelle kann eine einfache horizontale und vertikale Zentrierung erreicht werden, dies ist jedoch relativ umständlich. Werfen wir einen Blick auf die spezifische Implementierungsmethode:

HTML-Code:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS-Code:

.container {
    display: table;
    height: 300px;
    width: 100%;
    text-align: center;
}
.child {
    display: table-cell;
    vertical-align: middle;
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

In diesem Beispiel fügen wir zuerst das hinzu Container Stellen Sie den Anzeigemodus auf „Tabelle“ ein, stellen Sie dann die Höhe und Breite des Containers auf die gewünschte Größe ein und stellen Sie text-align auf „center“ (horizontale Zentrierung) ein. Als nächstes setzen wir den Anzeigemodus des untergeordneten Elements auf table-cell und erreichen eine vertikale Zentrierung durch das Attribut „vertikal-align“.

4. Rasterlayout verwenden

CSS-Rasterlayout ist eine leistungsstarke Layoutmethode, mit der wir schnell und effektiv rasterartige Layouts erstellen können, einschließlich horizontaler und zentrierter vertikaler Layouts. Die konkrete Implementierung ist wie folgt:

HTML-Code:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS-Code:

.container {
    display: grid;
    height: 300px;
    place-items: center;
}
.child {
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

In diesem Beispiel verwenden wir zunächst display:grid, um Konvertieren Sie den Container. Der Anzeigemodus ist auf Rasterlayout eingestellt. Anschließend verwenden wir die Eigenschaft „place-items“, um es horizontal und vertikal zu zentrieren. Da diese Methode noch relativ neu ist, ist sie hinsichtlich der Browserkompatibilität noch nicht gut genug.

Zusammenfassung

In diesem Artikel haben wir mehrere gängige Methoden untersucht, um eine vertikale Zentrierung in HTML zu erreichen. Jede dieser Methoden hat Vor- und Nachteile, und Sie können je nach tatsächlicher Situation und Bedarf die geeignete Methode auswählen. Wenn es sich nur um eine einfache vertikale Zentrierung handelt, ist die Verwendung von Flexbox oder absoluter Positionierung relativ einfach und effektiv. Für komplexere Layouts können Sie CSS Grid Layout verwenden.

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie HTML vertikal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!