Zusammenfassung von CSS(3), das einen horizontalen und vertikalen Zentrierungseffekt erzielt-CSS-Tutorial-php.cn

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. ausrichten Mit dieser Funktion können Sie eine horizontale und vertikale Mittelausrichtung von Text erreichen

<p class="container">Hello World！</p>.container {
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    border: 1px solid red;
}

Nach dem Login kopieren

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

Methode 2.

Verwenden Sie die absolute Positionierungsmethode und verwenden Sie sie mit negativen Randwerten. Es kann den horizontalen und vertikalen Zentrierungseffekt von Elementen erzielen.

<p class="container">Hello World！</p>.container {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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.

<p class="space"></p>
<p class="container">
    <p class="inner">
        hello world！    </p>
</p>.space {    float: left;
    height: 50%;
    margin-top: -150px;
}

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

Nach dem Login kopieren

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 p-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

<p class="container">Hello World！</p>.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 自身宽度和高度的一半    border: 1px solid red;
}

Nach dem Login kopieren

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.

<p class="container">Hello World！</p>.container {
    width: 300px;
    margin: 50% auto 0;
    border: 1px solid red;
    tarnsform: translateY(-50%);
}

Nach dem Login kopieren

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), beträgt 50 % wird zu diesem Zeitpunkt hinzugefügt. Negative Werte beim Übersetzen können kein vertikal zentriertes Layout erreichen.

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

<p class="container">Hello World！</p>.container {
    width: 300px;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    border: 1px solid red;
}

Nach dem Login kopieren

Methode 3

Für diejenigen, die es sind, gibt es in CSS3 ein Flex-Layout (einziehbares Layout-Box-Modell, auch elastisches Layout-Box-Modell genannt). vertraut mit Flex Es könnte nicht einfacher sein, Flex zu verwenden, um eine horizontale und vertikale Zentrierung zu erreichen.

<p class="container">
    <p class="inner">
        <p>hello world!</p>
    </p>
</p>.container {
    display: flex;
    height: 100vh;
}

.inner {
    margin: auto;
}

Nach dem Login kopieren

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

<p class="container">
    <p class="inner">
        <p>hello world</p>
    </p>
</p>.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Nach dem Login kopieren

Methode 4

Sie können

verwenden, um eine Tabelle zu simulieren, und display: table auf die Unterelemente festlegen, um diese zu erstellen Teil der Tabelle. Zellen und legen Sie gleichzeitig display: table-cell fest. vertical-align: middle

<p class="container">
    <p class="inner">
        hello world！    </p>
</p>.container {
    display: table;         /* 让p以表格的形式渲染 */
    width: 100%;
    border: 1px solid red;
}

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

Nach dem Login kopieren

Damit können Sie ein vertikal zentriertes Layout erreichen Bei 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.

Das obige ist der detaillierte Inhalt vonZusammenfassung von CSS(3), das einen horizontalen und vertikalen Zentrierungseffekt erzielt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!