4 Möglichkeiten, eine horizontale und vertikale Zentrierung in CSS zu erreichen

In diesem Artikel werden hauptsächlich vier Möglichkeiten vorgestellt, wie Sie eine horizontale und vertikale Zentrierung von CSS erreichen. Im Plan habe ich auch die Breite und Höhe angegeben, dies bedeutet jedoch nicht, dass Breite und Höhe festgelegt sind. Aber ich dachte, ich könnte den Effekt nicht sehen, ohne Breite und Höhe anzugeben. Die Tatsache, dass diese Lösung die Breite und Höhe nicht festlegt, bedeutet, dass nach der Verwendung dieser Lösung die horizontale und vertikale Zentrierungsposition weiterhin gewährleistet werden kann, wenn sich die Breite und Höhe Ihres übergeordneten Elements und untergeordneten Elements ändern.

Die folgenden vier Lösungen sind alle erreichbar. Wenn sich die Breite und Höhe des übergeordneten Elements oder untergeordneten Elements ändert, bleibt das horizontal und vertikal zentrierte Layout erhalten.

Option 1: Positionierung

HTML

         <p class="father">
            <p class="son"></p>
         </p>

CSS

        .father {
            position: relative;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100px;
            height: 100px;
            background: red;
        }

Option 2: Flex

HTML unverändert

        <p class="father">
            <p class="son"></p>
        </p>

css

        .father {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            width: 100px;
            height: 100px;
            background: red;
        }

Option 3: Tabellenlayout

muss das übergeordnete Element auf display:table-cell einstellen und zum Erstellen Vertical und Text-Alignment verwenden Alle Inline-Elemente auf Blockebene werden horizontal und vertikal zentriert
Anzeige für untergeordnete Elemente festlegen: inline-block

html unverändert

  <p class="father">
        <p class="son"></p>
    </p>

css

  .father {
            display: table-cell;
            width: 200px;
            height: 200px;
            background: skyblue;
            vertical-align: middle;
            text-align: center;
        }
        .son {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
        }

Option 4: Rasterlayout (unterstützt von den neuesten Browsern)

HTML bleibt unverändert

        <p class="father">
            <p class="son"></p>
        </p>

CSS bleibt unverändert

        .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }

Verwandte Empfehlungen:

So legen Sie die horizontale und vertikale Zentrierung von HTML-Elementen fest

Code-Sharing zum Erreichen einer horizontalen und vertikalen Zentrierung und Ausrichtung an beiden Enden in CSS

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

Das obige ist der detaillierte Inhalt von4 Möglichkeiten, eine horizontale und vertikale Zentrierung in CSS zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!