Diskussion zur horizontalen und vertikalen Zentrierung von Elementen in der HTML_HTML/Xhtml_Webpage-Produktion

Wenn wir die Seite entwerfen, müssen wir häufig das DIV zentrieren und es horizontal und vertikal relativ zum Seitenfenster anzeigen, z. B. um das Anmeldefenster zu zentrieren.

Bisher wurden viele Methoden erforscht.

HTML:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <Körper>
2.  <div class="maxbox" >
3.  <div class="minbox align -center">div>
4.  div> 
5. Körper>

Rendering (die folgenden Methoden haben die gleichen Renderings):

Der erste Typ: CSS-Absolutpositionierung

Verwenden Sie hauptsächlich die absolute Positionierung und verwenden Sie dann den Rand, um die mittlere Position anzupassen.

Übergeordnetes Element:

CSS-CodeInhalt in die Zwischenablage kopieren

1. .maxbox{
2. Position: relativ;
3. Breite: 500px;
4. Höhe: 500px;
Marge
5. : 5px; Box-Shadow: 1px
6. 1px 1px rgba (0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8); }
8. Untergeordnete Elemente:

CSS-Code

Inhalt in die Zwischenablage kopieren

.minbox{

1. Breite
:
2. 200px; Höhe
:
3. 200px; Box-Shadow: 1px
1px
4. 1px rgba (0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8); }

   Horizontale und vertikale Mittelausrichtung:

   CSS-CodeInhalt in die Zwischenablage kopieren

   1. .align-center{
   2. Position: absolut;
   3. links: 50 %;
   oben
   4. : 50 %;  Rand links
   : -
   5. 100px;  /*width/-2* /  Rand oben
   : -
   6. 100px;  /*height/-2* / }
   7. Zweiter Typ: CSS absolute Positionierung Javascript/JQuery

   Verwenden Sie hauptsächlich die absolute Positionierung und verwenden Sie dann Javascript/JQuery, um die mittlere Position anzupassen. Im Vergleich zur ersten Methode verbessert diese Methode die Flexibilität der Klasse.

   Übergeordnetes Element:

   CSS-Code

   Inhalt in die Zwischenablage kopieren

   .maxbox{

   1. Position
   :
   2. relativ; Breite:
   500px
   3. ; Höhe:
   500px
   4. ; Marge: 5px
   ;
   5. Box-Shadow: 1px 1px
   1px
   6. rgba (0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8); }
   Untergeordnete Elemente:
   CSS-Code
   8. Inhalt in die Zwischenablage kopieren
   .minbox{
   Breite

   :
   1. 200px;
   2. Höhe: 200px;
   Box-Shadow:
   3. 1px 1px 1px
   rgba (0, 0, 0, 0,8), -
   4. 1px -1px 1px rgba(0, 0, 0, 0,8); } Horizontale und vertikale Mittelausrichtung: CSS-Code
   Inhalt in die Zwischenablage kopieren
   5. 1. .align-center{
      2. Position: absolut;
      3. links: 50 %;
      oben
      4. : 50 %; }
      6. JQuery:
      JavaScript-Code

   Inhalt in die Zwischenablage kopieren

   $(

   Funktion

   1. (){ $(".align-center"
   ).css(
   2.                                               
   "margin-left"
   3. : ($(
   ".align-center"
   4. ).width() /-2),  "margin-top": ($(
   ".align-center"
   5. ).height() /-2)                                                               );
   });
   8. Der dritte Typ: CSS3 absolute Positionierungsverschiebung
   9. Durch die Verwendung absoluter Positionierung und CSS3s transform:translate kann auch der gleiche Effekt erzielt werden.
   Übergeordnetes Element:

   CSS-CodeInhalt in die Zwischenablage kopieren

   .maxbox{

   Position
   1. : relativ
   ;
   2. Breite: 500px;
   3. Höhe: 500px;
   4. Marge: 5px; Box-Shadow:
   1px
   5. 1px 1px rgba (0, 0, 0, 0,8), -
   1px
   6. -1px 1px rgba(0, 0, 0, 0,8); } Untergeordnete Elemente:
   CSS-Code
   7. Inhalt in die Zwischenablage kopieren
   1. .minbox{
   2. Breite: 200px;
   3. Höhe: 200px;
   Box-Shadow:
   4. 1px 1px 1px rgba (0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8);
   }
   Horizontale und vertikale Mittelausrichtung:

   CSS-Code

   Inhalt in die Zwischenablage kopieren

   1. .align-center{
   2. Position: absolut;
   oben
   3. : 50 %; links
   : 50 %;
   4. -webkit-transform: Translate(-50%, -50%); -moz-transform: Translate(-50%, -50%); transform: Translate(-50%, -50%)/*Nach links und oben verschieben*/
   }
   7. Vierter Typ: Flexbox: [Teleskop-Layout-Box-Modell]
   8. Mit dem Flexbox-Modell ist es zu einfach, Elemente horizontal und vertikal zu gestalten.
   Sie müssen den HTML-Code hier ändern:
   XML/HTML-Code

   Inhalt in die Zwischenablage kopieren

   <

   div

   class=

   "maxbox align-center"

   1. >  <div class=
   "minbox"
   2. >div> div>
   3. Übergeordnetes Element: CSS-Code
   Inhalt in die Zwischenablage kopieren
   4. 1. .maxbox{
      2. Position: relativ;
      3. Breite: 500px;
      4. Höhe: 500px;
      Marge
      5. : 5px; Box-Shadow: 1px
      6. 1px 1px rgba (0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8); }
      8. Untergeordnete Elemente:
      C#-Code

   Inhalt in die Zwischenablage kopieren

   .minbox{

   1. Breite: 200px;
   Höhe: 200px;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8);
   }
   5. Horizontale und vertikale Mittelausrichtung:

   CSS-Code

   Inhalt in die Zwischenablage kopieren

   .align-

   center

   1. { Anzeige
   : Flex;
   2. Anzeige: -webkit-flex;
    
   3. Begründen-Inhalt: Mitte
   ;
   4. align-items: center; }
   Vergleich mehrerer Methoden:
   5. Die erste CSS-Anpassung des absoluten Positionierungsspielraums weist eine gute Kompatibilität auf, es mangelt ihr jedoch an Flexibilität. Wenn es viele Felder gibt, die horizontal und vertikal zentriert werden müssen, müssen aufgrund ihrer unterschiedlichen Breite und Höhe unterschiedliche .align-center geschrieben werden. Der zweite verwendet eine Skriptsprache, die gut kompatibel ist und die Mängel des ersten ausgleicht. Der Effekt der horizontalen und vertikalen Zentrierung wird durch Änderungen in Breite und Höhe nicht beeinflusst. Der dritte nutzt einige neue Eigenschaften von CSS3 und ist mit IE10, Chrome, Firefox und Opera kompatibel. Die Kompatibilität ist nicht sehr gut und der horizontale und vertikale Zentrierungseffekt wird durch Änderungen in Breite und Höhe nicht beeinträchtigt. Bei Verwendung des Flexbox-Modells, das mit Firefox, Opera und Chrome kompatibel ist, wird der IE vollständig gelöscht. Auch die horizontale und vertikale Zentrierungswirkung aufgrund von Breiten- und Höhenänderungen wird dadurch nicht beeinträchtigt. Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.