CSS-Element vertikal zentriert

autoload
Freigeben: 2021-04-15 13:59:41
Original
1509 Leute haben es durchsucht

CSS-Element vertikal zentriert

Das lästige Problem bei CSS ist die vertikale Zentrierung. Es gibt mehrere Möglichkeiten, eine vertikale Zentrierung zu erreichen, aber jede Methode weist bestimmte Einschränkungen auf, sodass die vertikale Zentrierung entsprechend den tatsächlichen Geschäftsszenarien verwendet werden kann.

1. Der Inhalt im Container besteht nur aus einer Textzeile

2. Die einfachste vertikale Zentrierungsmethode in CSS besteht darin, den Container anzugeben Gleiche obere und untere Polsterung, sodass Behälter und Inhalt ihre eigene Höhe bestimmen können. Schauen Sie sich das Beispiel unten an, das den Inhalt im übergeordneten Container vertikal zentriert, indemauf einen gleichen Wert gesetzt wird.

    
测试
Nach dem Login kopieren

3. Verwenden Sie FlexBox

padding-toppadding-bottom

    
测试
Nach dem Login kopieren

Empfohlen: „Zusammenfassung der CSS-Interviewfragen 2021 (Neueste)

Das obige ist der detaillierte Inhalt vonCSS-Element vertikal zentriert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!