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

Anwendung von HTML und CSS in Flash

Anwendung von HTML und CSS in Flash: Ich habe zufä...

So installieren Sie die Odoo12-Entwicklungsumgebung unter Windows 10

Vorwort Da viele Freunde sagen, dass sie keinen M...

Lösung für Docker-Container, der Schriftarten wie Songti nicht erkennt

Problemhintergrund: Wenn Sie Docker zum Bereitste...

Detaillierte Erklärung der drei Möglichkeiten zum Umbrechen von Text in der El-Table-Kopfzeile

Inhaltsverzeichnis Problembeschreibung Rendern Dr...

Natives JS zur Implementierung der Drag-Position-Vorschau

In diesem Artikel wird eine kleine Demo gezeigt, ...

So installieren Sie Docker unter CentOS und veröffentlichen Docker remote in Springboot

Inhaltsverzeichnis 1. Installation von JDK1.8 unt...

Eine kurze Diskussion über zwei Methoden zum Erreichen einer halbtransparenten Hintergrundfarbe in CSS

Um den Benutzern beim Layouten der Seite einen an...

Eine kurze Diskussion über die Verwendung der Web Storage API

Inhaltsverzeichnis 1. Lokale Speichertechnologie ...

So verwenden Sie die asynchrone Anforderungs-API von Axios in Vue

Inhaltsverzeichnis Einrichten einer einfachen HTT...

CentOS 6-7 Yum-Installationsmethode für PHP (empfohlen)

1. Überprüfen Sie die aktuell installierten PHP-P...

Warum Nginx besser ist als Apache

Nginx hat in nur wenigen Jahren den Großteil des ...

Konventionelle JS-Verarbeitungsfunktionen für die Entwicklung von Vue Element-Frontend-Anwendungen

Inhaltsverzeichnis 1. Filtern, Zuordnen und Reduz...

Detaillierter Prozess der Bereitstellung von Docker für WSL2 in IDEA

Die lokale Umgebung ist Windows 10 + WSL2 (Ubuntu...

Tutorial zum Konfigurieren und Ändern von Passwörtern für die kostenlose MySQL-Installationsversion

Schritt 1: Umgebungsvariablen konfigurieren (mein...

Antdesign-vue kombiniert mit sortablejs, um die Funktion zum Ziehen und Sortieren von zwei Tabellen zu erreichen

Inhaltsverzeichnis Ergebnisse erzielen Einführung...