Wie zentriere ich die Ober- und Unterseite in CSS?

So implementieren Sie die obere und untere CSS-Zentrierung: 1. Stellen Sie die Zeilenhöhe einer einzelnen Zeile von Inline-Elementen gleich der Boxhöhe ein. 2. Verwenden Sie mehrere Zeilen von Inline-Elementen für das übergeordnete Element, um „Anzeige“ festzulegen :table-cell; und Vertical-align: middle;“ reicht aus.

Die obere und untere Zentrierung in CSS ist die vertikale Zentrierung. CSS kann nach Elementen in drei vertikale Zentrierungsmethoden unterteilt werden: einzeilige Inline-Elemente und mehrzeilige Elemente. Die vertikale Zentrierung von Inline-Elementen und Blockelementen wird im Folgenden ausführlich vorgestellt.

Einzeilige Inline-Elemente

Sie müssen nur die „Zeilenhöhe gleich der Höhe der Box“ für die einzeiligen Elemente festlegen. line inline element;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    #son {
        background-color: green;
        height: 300px;
    }
</style>
 
<div id="father">
    <span id="son">我是单行的行内元素</span>
</div>

Effekt:

Mehrere Zeilen von Inline-Elementen

werden für übergeordnete Elemente verwendet. Legen Sie einfach display:table-cell; und Vertical-align: middle;; fest.

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }
 
    #son {
        background-color: green;
    }
</style>
 
<div id="father">

Ich bin ein Inline-Element mit mehreren Zeilen Ich bin ein Inline-Element mit mehreren Zeilen. Ich bin ein Inline-Element mit mehreren Zeilen. Ich bin ein Inline-Element mit mehreren Zeilen. Ich bin ein Inline-Element mit mehreren Zeilen. Ich bin ein Inline-Element mit mehreren Zeilen. Ich bin ein Inline-Element mit mehreren Zeilen ;/span>

Effekt:

Element auf Blockebene

Option 1: Positionierung verwenden

Stellen Sie zuerst das übergeordnete Element auf relative Positionierung ein, dann das untergeordnete Element auf absolute Positionierung und legen Sie den oberen Rand fest Untergeordnetes Element: 50 %, das heißt, die obere linke Ecke des untergeordneten Elements wird vertikal ausgerichtet.

Feste Höhe: Legen Sie den oberen Rand des untergeordneten Elements fest: -halbe px der Elementhöhe; set transform: TranslateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        top: 50%;
        margin-top: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

Unbestimmte Höhe: CSS3 verwenden >

Option 2: Verwenden Sie das Flexbox-Layout zur Implementierung (stark variabel, alles ist in Ordnung)

Bei Verwendung des Flexbox-Layouts müssen Sie nur die Attributanzeige hinzufügen: flex; align-items: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateY(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

zum übergeordneten Element des zu verarbeitenden Blockelements:

Verwandte Tutorials:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWie zentriere ich die Ober- und Unterseite in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!