CSS setzt div auf die Mitte oben und unten

1. Zeilenhöhenmethode

Wenn nur eine Zeile oder ein paar Wörter vertikal zentriert werden müssen, ist dies am einfachsten. Stellen Sie einfach die Zeilenhöhe des Textes auf die Höhe des Containers ein, zum Beispiel:

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

2. Simulationsformmethode

Stellen Sie den Container auf display:table ein, legen Sie dann das untergeordnete Element, also das Element, das vertikal zentriert werden soll, auf display:table-cell fest und fügen Sie dann Vertical-Align:Middle hinzu, um dies zu erreichen.

Die HTML-Struktur ist wie folgt:

<div id="wrapper">
    <div id="cell">
        <p>测试垂直居中效果测试垂直居中效果</p>
        <p>测试垂直居中效果测试垂直居中效果</p>
    </div>
</div>

CSS-Code:

#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;}
#cell{display:table-cell; vertical-align:middle;}

Leider werden IE7 und niedriger nicht unterstützt.
Klicken Sie hier, um den Link für weitere Methoden zu senden
Nachdruck von: https://www.cnblogs.com/xiaocaiyuxiaoniao/p/10407830.html