Diskussion zur horizontalen und vertikalen Zentrierung von Elementen in der HTML_HTML/Xhtml

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

WBOY

Freigeben： 2016-05-16 16:36:04

Original

2101 Leute haben es durchsucht

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

<Körper>
<div class="maxbox" >
<div class="minbox align -center">div>
div>
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

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

CSS-Code

Inhalt in die Zwischenablage kopieren

.minbox{

Breite
200px; Höhe
200px; Box-Shadow: 1px
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 %;
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:
3. ; Höhe:
4. ; Marge: 5px
5. Box-Shadow: 1px 1px
6. rgba (0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8); }
8. Inhalt in die Zwischenablage kopieren
.minbox{
Breite
1. 200px;
2. Höhe: 200px;
3. 1px 1px 1px
4. 1px -1px 1px rgba(0, 0, 0, 0,8); } Horizontale und vertikale Mittelausrichtung: CSS-Code
5. .align-center{
  
  Position: absolut;
  
  links: 50 %;
  oben
  : 50 %; }
  
  JQuery:
  
  JavaScript-Code
Inhalt in die Zwischenablage kopieren
$(
Funktion
1. (){ $(".align-center"
3. : ($(
4. ).width() /-2), "margin-top": ($(
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.
CSS-CodeInhalt in die Zwischenablage kopieren
.maxbox{
1. : relativ
2. Breite: 500px;
3. Höhe: 500px;
4. Marge: 5px; Box-Shadow:
5. 1px 1px rgba (0, 0, 0, 0,8), -
6. -1px 1px rgba(0, 0, 0, 0,8); } Untergeordnete Elemente:
7. Inhalt in die Zwischenablage kopieren
CSS-Code
Inhalt in die Zwischenablage kopieren
.align-center{

Position: absolut;
oben
: 50 %; links
: 50 %;
-webkit-transform: Translate(-50%, -50%); -moz-transform: Translate(-50%, -50%); transform: Translate(-50%, -50%)/*Nach links und oben verschieben*/

}

Vierter Typ: Flexbox: [Teleskop-Layout-Box-Modell]

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"
> <div class=
"minbox"
>div> div>
Übergeordnetes Element: CSS-Code
Inhalt in die Zwischenablage kopieren

.maxbox{

Position: relativ;

Breite: 500px;

Höhe: 500px;
Marge
: 5px; Box-Shadow: 1px

1px 1px rgba (0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8); }

Untergeordnete Elemente:

C#-Code
Inhalt in die Zwischenablage kopieren
.minbox{

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);

}

Horizontale und vertikale Mittelausrichtung:

CSS-Code
Inhalt in die Zwischenablage kopieren
.align-

center

{ Anzeige
: Flex;
Anzeige: -webkit-flex;

Begründen-Inhalt: Mitte
;
align-items: center; }
Vergleich mehrerer Methoden:
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.