Diskussion zur horizontalen und vertikalen Zentrierung von Elementen in HTML

Diskussion zur horizontalen und vertikalen Zentrierung von Elementen in HTML

Beim Entwerfen einer Seite müssen wir das DIV häufig zentrieren und es horizontal und vertikal relativ zum Seitenfenster zentrieren, beispielsweise beim Zentrieren des Anmeldefensters.

Bisher wurden viele Methoden erforscht.

HTML:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < Textkörper >   
  2.      < div   Klasse = "maxbox" >   
  3.          < div   Klasse = "Minbox ausrichten-zentrieren" > </ div >   
  4.      </div>​​   
  5. </ Körper >   
  6.   

Wirkungsdiagramm (die folgenden Methoden haben das gleiche Wirkungsdiagramm):

Die erste: Absolute Positionierung in CSS

Verwenden Sie hauptsächlich die absolute Positionierung und passen Sie sie dann mithilfe des Rands an die mittlere Position an.

Übergeordnetes Element:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .maxbox{
  2.      Position : relativ ;
  3.      Breite : 500px ;
  4.      Höhe : 500px ;
  5.      Rand : 5px ;
  6. Kastenschatten: 1px   1 Pixel   1px rgba(0, 0, 0, 0,8), - 1px - 1px   1px rgba(0, 0, 0, 0,8);
  7. }
  8.   

Untergeordnete Elemente:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .minbox{
  2.      Breite : 200px ;
  3.      Höhe : 200px ;
  4. Kastenschatten: 1px   1 Pixel   1px rgba(0, 0, 0, 0,8), - 1px - 1px   1px rgba(0, 0, 0, 0,8);
  5. }

Horizontale und vertikale Zentrierung:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .align- center {
  2.      Position : absolut ;
  3.      links : 50 %;
  4.      oben : 50 %;
  5.      Rand links : - 100px ; /*Breite/-2*/   
  6.      Rand oben : – 100px ; /*Höhe/-2*/   
  7. }

Die zweite Methode: CSS-absolute Positionierung + Javascript/JQuery

Verwenden Sie hauptsächlich die absolute Positionierung und passen Sie sie dann mit Javascript/JQuery an die mittlere Position an. Im Vergleich zur ersten Methode verbessert diese Methode die Flexibilität der Klasse.

Übergeordnetes Element:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .maxbox{
  2.      Position : relativ ;
  3.      Breite : 500px ;
  4.      Höhe : 500px ;
  5.      Rand : 5px ;
  6. Kastenschatten: 1px   1 Pixel   1px rgba(0, 0, 0, 0,8), - 1px - 1px   1px rgba(0, 0, 0, 0,8);
  7. }
  8.   

Untergeordnete Elemente:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .minbox{
  2.      Breite : 200px ;
  3.      Höhe : 200px ;
  4. Kastenschatten: 1px   1 Pixel   1px rgba(0, 0, 0, 0,8), - 1px - 1px   1px rgba(0, 0, 0, 0,8);
  5. }

Horizontale und vertikale Zentrierung:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .align- center {
  2.      Position : absolut ;
  3.      links : 50 %;
  4.      oben : 50 %;
  5. }
  6.   

JQuery:

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. $( Funktion () {
  2. $( ".align-center" ).css(
  3. {
  4.              "Rand links" : ($( ".align-center" ).width()/-2),
  5.              "Rand oben" : ($( ".align-center" ).Höhe()/-2)
  6. }
  7. );
  8. });
  9.   

Der dritte Typ: CSS3 absolute Positionierung + Verschiebung

Derselbe Effekt kann durch die Verwendung der absoluten Positionierung und der Funktion „transform: translate“ von CSS3 erzielt werden.

Übergeordnetes Element:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .maxbox{
  2.      Position : relativ ;
  3.      Breite : 500px ;
  4.      Höhe : 500px ;
  5.      Rand : 5px ;
  6. Kastenschatten: 1px   1 Pixel   1px rgba(0, 0, 0, 0,8), - 1px - 1px   1px rgba(0, 0, 0, 0,8);
  7. }
  8.   

Untergeordnete Elemente:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .minbox{
  2.      Breite : 200px ;
  3.      Höhe : 200px ;
  4. Kastenschatten: 1px   1 Pixel   1px rgba(0, 0, 0, 0,8), - 1px - 1px   1px rgba(0, 0, 0, 0,8);
  5. }
  6.   

Horizontale und vertikale Zentrierung:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .align- center {
  2.      Position : absolut ;
  3.      oben : 50 %;
  4.      links : 50 %;
  5. -webkit-transform: übersetzen(-50 %, -50 %);
  6. -moz-transform: übersetzen(-50 %, -50 %);
  7. transform: translate(-50%, -50%); /*Nach links und oben bewegen*/   
  8. }
  9.   

Viertens: Flexbox: [Flexibles Layout-Box-Modell]

Mit dem Flexbox-Modell ist es zu einfach, Elemente horizontal und vertikal zu erstellen.

Hier müssen wir das HTML ändern:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < div   Klasse = "Maxbox Align-Center" >   
  2.      < div   Klasse = "minbox" > </ div >   
  3. </div>​​   
  4.   

Übergeordnetes Element:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .maxbox{
  2.      Position : relativ ;
  3.      Breite : 500px ;
  4.      Höhe : 500px ;
  5.      Rand : 5px ;
  6. Kastenschatten: 1px   1 Pixel   1px rgba(0, 0, 0, 0,8), - 1px - 1px   1px rgba(0, 0, 0, 0,8);
  7. }
  8.   

Untergeordnete Elemente:

C#-Code zum Kopieren von Inhalten in die Zwischenablage
  1. .minbox{
  2. Breite: 200px;
  3. Höhe: 200px;
  4. Kastenschatten: 1px 1px 1px rgba(0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8);
  5. }

Horizontale und vertikale Zentrierung:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .align- center {
  2.      Anzeige : Flex;
  3.      Anzeige : -webkit-flex; /*Kompatibilitätsproblem*/   
  4.      ausrichten - Inhalt : zentriert ;
  5. Elemente ausrichten: zentriert ;
  6. }

Vergleich mehrerer Methoden:

Der erste Typ der absoluten CSS-Positionierungsrandanpassung weist eine gute Kompatibilität auf, es fehlt ihm jedoch an Flexibilität. Wenn viele Boxen horizontal und vertikal zentriert werden müssen, sollten aufgrund ihrer unterschiedlichen Breiten und Höhen unterschiedliche .align-center-Befehle geschrieben werden.
Die zweite verwendet eine Skriptsprache, die eine gute Kompatibilität aufweist und die Mängel der ersten ausgleicht. Die horizontale und vertikale Zentrierwirkung wird durch Breiten- und Höhenänderungen nicht beeinflusst.
Die dritte verwendet einige neue Eigenschaften von CSS3 und ist mit IE10, Chrome, Firefox und Opera kompatibel. Die Kompatibilität ist nicht sehr gut und die horizontalen und vertikalen Zentriereffekte werden durch Änderungen der Breite und Höhe nicht beeinflusst.
Durch die Verwendung des Flexbox-Modells ist es mit Firefox, Opera und Chrome kompatibel, der IE ist jedoch völlig im Nachteil. Die horizontale und vertikale Zentrierwirkung wird durch Breiten- und Höhenänderungen nicht beeinflusst.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein.

<<:  MySQL-Abfrageanweisung nach Zeit gruppiert

>>:  Klassischer Beispielcode für JavaScript-Funktionsaufrufe

Artikel empfehlen

So verwenden Sie den MySQL-Autorisierungsbefehl „grant“

Die Beispiele in diesem Artikel laufen auf MySQL ...

Reines HTML+CSS, um einen Tippeffekt zu erzielen

In diesem Artikel wird hauptsächlich der durch re...

Beispielcode, wie CSS mehrere Klassen abgleicht

CSS stimmt mit mehreren Klassen überein Das folge...

Nginx-Lastausgleichsalgorithmus und Failover-Analyse

Überblick Der Lastenausgleich von Nginx bietet Up...

Was ist WML?

WML (Wireless Markup Language). Es handelt sich u...

Zusammenfassung einiger Grundsätze, die bei der Ausgabe von HTML-Seiten beachtet werden sollten

1. DOCTYPE ist unverzichtbar. Der Browser bestimm...

So führen Sie den Betrieb nach dem Verlassen des Docker-Containers weiter aus

Phänomen: Führen Sie ein Image aus, zum Beispiel ...

JS+Canvas zeichnet ein Glücksrad

In diesem Artikel wird der spezifische Code der J...

Natives JS zur Implementierung des Spiels 2048

2048 Minispiel, zu Ihrer Information, der spezifi...

Methode zur Wiederherstellung von Betriebs- und Wartungsdaten der MySQL-Datenbank

In den vorherigen drei Artikeln wurden gängige Si...

Detailliertes Tutorial zur Installation von Docker und Nvidia-Docker unter Ubuntu 16.04

Inhaltsverzeichnis Docker-Installation Nvidia-Doc...

MySQL-Datenbank GTID realisiert Master-Slave-Replikation (super praktisch)

1. Maria-Quelle hinzufügen vi /etc/yum.repos.d/Ma...

Zusammenfassung der häufig verwendeten Datenbank- und Tabellen-Sharding-Lösungen von MySQL

Inhaltsverzeichnis 1. Datenbank-Engpass 2. Unterb...

Implementierung der CentOS8.0-Netzwerkkonfiguration

1. Unterschiede in der Netzwerkkonfiguration zwis...

Detaillierte Erklärung von as, Fragezeichen und Ausrufezeichen in Typescript

1. Das Schlüsselwort as gibt eine Behauptung an I...