So erreichen Sie eine horizontale Zentrierung variabler Breite in CSS

Methode: 1. Verwenden Sie das Flex-Layout und setzen Sie die Attribute „ustify-content“ und „align-items“ auf „center“, um eine Zentrierung zu erreichen. 2. Verwenden Sie „transform“ und „position“, um eine Zentrierung zu erreichen. 3. Verwenden Sie „table-cell“ und verwenden Sie die Zellen der Tabelle Zentrierende Wirkung.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen: „CSS-Video-Tutorial“

CSS, um eine horizontale Zentrierung mit variabler Breite zu erreichen

Methode 1: Flex verwenden

Jeder erste Reaktion könnte Flex sein. Weil die Schreibmethode einfach und intuitiv genug ist und es kein Kompatibilitätsproblem gibt. Es ist die erste Wahl für den Fokus auf Mobiltelefone.

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

Verwendet zwei Schlüsselattribute: justify-content und align-items, beide sind auf „center“ eingestellt, um eine Zentrierung zu erreichen.

Zu beachten ist, dass das Flex-Center hier am Elternelement aufgehängt werden muss, damit das einzige Kindelement zentriert werden kann.

Methode 2: Verwenden Sie die Kombination aus Transformation + Position

, die häufig zum Zentrieren des Bildes verwendet wird.

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}
.wrapper > img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Natürlich können Sie auch die relative Positionierung des Wrappers des übergeordneten Elements in das untergeordnete Element img verschieben und so die absolute Positionierung ersetzen. Der Effekt ist der gleiche.

Methode 3: Tabellenzelle

Verwenden Sie den Zellenzentrierungseffekt der Tabelle zur Anzeige. Wie Flex muss es auf das übergeordnete Element geschrieben werden.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Methode 4: Raster

Wie bei Tabellen ermöglicht uns das Rasterlayout, Elemente nach Zeilen oder Spalten auszurichten. Vom Layout her sind Raster jedoch möglicher bzw. einfacher als Tabellen.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: grid;
}
.wrapper > p {
    align-self: center;
    justify-self: center;
}

Aber hinsichtlich der Kompatibilität ist es nicht so gut wie Flex, insbesondere mit dem IE-Browser, der nur IE10 und höher unterstützt.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine horizontale Zentrierung variabler Breite in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!