Heim > Artikel > Web-Frontend > HTML zentriert Elemente horizontal und vertikal
HTML zentriert Elemente horizontal und vertikal
- 高洛峰Original
- 2017-02-27 10:43:421042Durchsuche
Wenn wir die Seite entwerfen, zeigen wir das p häufig in der Mitte an und zeigen es horizontal und vertikal relativ zum Seitenfenster an, z. B. indem wir das Anmeldefenster zentrieren.
Bisher wurden viele Methoden erforscht.
HTML:
<body>
<p class="maxbox">
<p class="minbox align-center"></p>
</p>
</body>Rendering (die folgenden Methoden haben das gleiche Rendering):
Das erster Typ: CSS-Absolutpositionierung
verwendet hauptsächlich die absolute Positionierung und verwendet dann den Rand, um sich an die mittlere Position anzupassen.
Übergeordnetes Element:
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}Untergeordnetes Element:
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}
Horizontale vertikale Mittelausrichtung:
.align-center{
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /*width/-2*/
margin-top: -100px; /*height/-2*/
}
Zweiter Typ: CSS-Absolutpositionierung + 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:
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}Untergeordnetes Element:
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}
Horizontale vertikale Mittelausrichtung:
.align-center{
position: absolute;
left: 50%;
top: 50%;
} JQuery:
$(function(){
$(".align-center").css(
{
"margin-left": ($(".align-center").width()/-2),
"margin-top": ($(".align-center").height()/-2)
}
);
});Dritter Typ: CSS3 absolute Positionierung + Verschiebung
Absolute Positionierung mit CSS3-Transformation verwenden: übersetzen Das Gleiche Wirkung erzielt werden kann.
Übergeordnetes Element:
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}Untergeordnetes Element:
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}Horizontale vertikale Mittelausrichtung:
.align-center{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); /*向左向上位移*/
} Vierter Typ: Flexbox: [Teleskop-Layout-Box-Modell]
Für das Flexbox-Modell ist es zu einfach, Elemente horizontal und vertikal zu gestalten.
Hier müssen Sie den HTML-Code ändern:
<p class="maxbox align-center">
<p class="minbox"></p>
</p>Übergeordnetes Element:
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}
Untergeordnetes Element:
.minbox{
width: 200px;
height: 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:
.align-center{
display: flex;
display: -webkit-flex; /*兼容问题*/
justify-content: center;
align-items: center;
}
Vergleich mehrerer Methoden:
Das erste CSS Die absolute Anpassung des Positionierungsspielraums weist eine gute Kompatibilität auf, es mangelt jedoch an Flexibilität. Wenn es viele Felder gibt, die horizontal und vertikal zentriert werden müssen, müssen sie aufgrund ihrer unterschiedlichen Breite und Höhe unterschiedlich .align-center geschrieben werden.
Die zweite verwendet eine Skriptsprache, die gut kompatibel ist und die Mängel der 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.
Weitere HTML-bezogene Artikel zur horizontalen und vertikalen Zentrierung von Elementen finden Sie auf der chinesischen PHP-Website!