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>