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

Praxis und Analyse der geschichteten Verpackung von Docker-Images für Spring Boot (empfohlen)

Inhaltsverzeichnis 1. Bereiten Sie das Springboot...

Lösung für das Problem des MySQL-Datenverzögerungssprungs

Heute haben wir ein weiteres typisches Problem im...

Installieren Sie MySQL 5.7.18 mit dem RPM-Paket unter CentOS 7

Ich habe kürzlich MySQL verwendet. Im Artikel „My...

Eine Zeile CSS-Code zur Integration von Avatar und Nationalflagge

Es ist Nationalfeiertag und jeder kann es kaum er...

Tutorial zur Installation von MySQL8 unter Linux CentOS7

1. Installation der RPM-Version Überprüfen Sie, o...

So lassen Sie eine https-Website den https-Referrer senden und den http-Referrer springen

Dieser Artikel beschreibt einen Vorschlag für ein...

Grafisches Tutorial zur kostenlosen Installationsversion von MySQL 5.7.16 unter Linux

In diesem Artikel wird das Tutorial zur kostenlos...

So beheben Sie Dateisystemfehler in Linux mit „fsck“

Vorwort Das Dateisystem ist für die Organisation ...

Lösung für das Problem, dass die Div-Breite auf width:100% eingestellt ist und dann die Polsterung oder der Rand das übergeordnete Element überschreitet

Vorwort In diesem Artikel wird erläutert, wie Sie...

CSS3 beschleunigt und verzögert Übergänge

1. Verwenden Sie die Geschwindigkeitskontrollfunk...

Schritt-für-Schritt-Anleitung zum Erstellen einer Kalenderkomponente mit React

Inhaltsverzeichnis Betriebswirtschaftlicher Hinte...

jQuery-Plugin zum Implementieren eines schwebenden Menüs

Lernen Sie jeden Tag ein schwebendes jQuery-Plug-...

So installieren Sie MySQL auf CentOS und richten den Fernzugriff ein

1. Laden Sie die MySQL-Repo-Quelle herunter $ wge...

Analyse der Unterschiede zwischen Mysql InnoDB und MyISAM

MySQL unterstützt viele Arten von Tabellen (d. h....

Detaillierte Erklärung des Loop-Formularelementbeispiels in Vue

Manchmal stoßen wir auf eine solche Anforderung, ...