Einführung in verschiedene Methoden zum Erreichen einer horizontalen und vertikalen Zentrierung mit CSS

CSS implementiert die horizontale und vertikale Zentrierungsausrichtung

Es ist relativ einfach, die horizontale Zentrierung in CSS zu implementieren. Wenn Sie eine horizontale Zentrierung von Inline-Elementen oder Inline-Block-Elementen erreichen möchten, können Sie im Allgemeinen text-align: center für das übergeordnete Element auf Blockebene festlegen. Wenn Sie eine horizontale Zentrierung von Elementen auf Blockebene erreichen möchten, können Sie . Und wenn Sie eine vertikale Mittelausrichtung erreichen möchten, ist dies möglicherweise nicht einfach. magin: auto

Nachfolgend habe ich einige Methoden zusammengefasst, um eine horizontale und vertikale Mittelausrichtung zu erreichen. Sollten Mängel vorliegen, weisen Sie diese bitte darauf hin.

Die Implementierung der horizontalen und vertikalen Zentrierung kann in zwei Hauptinhalte unterteilt werden: Der eine ist

die Höhe ändert sich adaptiv mit dem Inhalt, der andere ist die feste Höhe.

Feste Höhe, um horizontale und vertikale Zentrierung zu erreichen

Methode 1

Die gebräuchlichste Methode besteht darin, Höhe + Zeilenhöhe zu verwenden, denselben Wert festzulegen und Text zu verwenden. align Verwenden Sie diese Option, um eine horizontale und vertikale Mittelausrichtung von Text zu erreichen

<div class="container">Hello World！</div>

.container {
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    border: 1px solid red;
}

Nachteile: feste Höhe, keine vertikale Mittelausrichtung von zwei Textzeilen möglich

Methode 2

Verwenden Sie die absolute Positionierungsmethode, die mit negativen Randwerten verwendet wird. Es kann den horizontalen und vertikalen Zentrierungseffekt von Elementen erzielen.

<div class="container">Hello World！</div>

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

Natürlich können Sie die Berechnungsfunktion von CSS3 verwenden, um den obigen CSS-Code zu vereinfachen

.container {
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

Nachteile: feste Höhe, Höhe kann nicht an den Inhalt angepasst werden. Das Element bricht aus dem Dokumentenfluss aus.

Methode 3

Fügen Sie ein leeres Tag hinzu und lassen Sie das Element aus dem Dokumentfluss schweben, um eine Beeinträchtigung des Layouts anderer Elemente zu vermeiden.

<div class="space"></div>
<div class="container">
    <div class="inner">
        hello world！
    </div>
</div>

.space {
    float: left;
    height: 50%;
    margin-top: -150px;
}

.container {
    clear: both;
    height: 300px;
    border: 1px solid red;
    position: relative;
}

Nachteile: Die vertikale Zentrierung auf diese Weise erfordert eine feste Höhe und eine inhaltsadaptive Höhe kann nicht erreicht werden. Gleichzeitig erscheinen redundante leere div-Elemente.

Höhenadaptive Implementierung der horizontalen und vertikalen Zentrierung

Methode 1

Es gibt ein Transformationsattribut unter diesem Attribut. Diese Funktion akzeptiert zwei Parameter. Wenn beide Parameter Prozentwerte sind, basiert die Bewegung auf der eigenen Breite und Höhe. Der Bewegungsmechanismus dieser Funktion ähnelt

. position:relative

<div class="container">Hello World！</div>

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 自身宽度和高度的一半
    border: 1px solid red;
}

Vorteile: Die Höhe muss nicht eingestellt werden. Die Höhe passt sich dem Inhalt an.

Nachteil: Elemente werden vom Dokumentenfluss losgelöst. Wenn das Element, das zentriert werden muss, die Höhe des Ansichtsfensters bereits überschreitet, wird seine Oberseite vom Ansichtsfenster abgeschnitten.

Methode 2

Wir wissen, dass der Rand verwendet werden kann, um eine horizontale Mittenausrichtung zu erreichen, aber der Grund, warum der Rand nicht verwendet werden kann, um eine vertikale Zentrierung zu erreichen, liegt darin, dass der prozentuale Wert des Randes basierend auf berechnet wird Breite.

<div class="container">Hello World！</div>

.container {
    width: 300px;
    margin: 50% auto 0;
    border: 1px solid red;
    tarnsform: translateY(-50%);
}

Da im obigen Code der Prozentsatz basierend auf der Breite des übergeordneten Elements berechnet wird (das übergeordnete Element ist zu diesem Zeitpunkt das Körperelement), werden 50 % plus der negative Wert von translator at berechnet Dieses Mal kann keine vertikale Zentrierung erreicht werden.

Allerdings gibt es in CSS eine vh (Ansichtsfensterhöhe), die der Höhe von

oder document.body.clientHeight im DOM entspricht, d. h. 1vh ist gleich 1 % der Höhe des Ansichtsfensters. Informationen zu Browserkompatibilitätsproblemen mit der vh-Einheit finden Sie unter vh. Daher kann der obige Code wie folgt geändert werden, um den horizontalen und vertikalen Zentrierungseffekt zu erzielen. document.documentElement.clientHeight

<div class="container">Hello World！</div>

.container {
    width: 300px;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    border: 1px solid red;
}

Methode 3

In CSS3 gibt es ein Flex-Layout (einziehbares Layout-Box-Modell, auch elastisches Layout-Box-Modell genannt). Für diejenigen, die mit Flex vertraut sind, verwenden Sie Flex, um horizontal zu erreichen und vertikale Zentrierung Einfacher geht es nicht.

<div class="container">
    <div class="inner">
        <p>hello world!</p>
    </div>
</div>

.container {
    display: flex;
    height: 100vh;
}

.inner {
    margin: auto;
}

Wenn wir das übergeordnete Element

erstellen, kann display: flex nicht nur horizontal, sondern auch vertikal zentriert werden. Dies liegt daran, dass automatische Ränder den zusätzlichen Platz horizontal oder vertikal halbieren. margin: auto

Natürlich können Sie auch

verwenden, um die Ausrichtung der Hauptachse des flexiblen Artikels zu definieren, und justify-content: center, um die Ausrichtung der Seitenachse des flexiblen Artikels zu definieren. align-items: center

<div class="container">
    <div class="inner">
        <p>hello world</p>
    </div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Methode 4

Sie können

verwenden, um eine Tabelle zu simulieren, und display: table auf das untergeordnete Element festlegen, es zu einer Zelle der Tabelle werden lassen und Gleichzeitig können Sie ein vertikal zentriertes Layout erreichen display: table-cellvertical-align: middle

Mit dieser Methode ist es nicht erforderlich, die Höhe festzulegen. Sie müssen lediglich eine beliebige Höhe oder keine Höhe angeben, um den horizontalen und vertikalen Zentrierungseffekt zu erzielen.

<div class="container">
    <div class="inner">
        hello world！
    </div>
</div>

.container {
    display: table;         /* 让div以表格的形式渲染 */
    width: 100%;
    border: 1px solid red;
}

.inner {
    display: table-cell;    /* 让子元素以表格的单元格形式渲染 */
    text-align: center;
    vertical-align: middle;
}

Das obige ist der detaillierte Inhalt vonEinführung in verschiedene Methoden zum Erreichen einer horizontalen und vertikalen Zentrierung mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!