Dieser Artikel stellt Ihnen hauptsächlich die fünf besten Lösungen für die vertikale und horizontale Zentrierung und ihre jeweiligen Vor- und Nachteile vor. Die Einführung ist sehr detailliert und hat Referenzwert .
CSS-Mittelausrichtung
Das Browser-Präfix wird im Code weggelassen
Die folgenden Beispiele sind nach meinem sortiert Persönliche Standards
Natürlich gibt es noch mehr Zentriermethoden, aber ich denke, nur diese 5 Methoden sind die umfassendsten Lösungen
Flex-Zentrierung
Vorteile: Unbekannte Höhen können zentriert werden
<style>
.wrap{height: 100%;display: flex; justify-content: center; align-items: center;align-content:center;}
.other{background-color: #ccc; width: 400px;height: 400px;} /* 额外的样式 可去除 */
</style>
<p class="wrap">
<p class="other">
<h2>这是第二层的内容 不会居中</h2>
</p>
</p>Zentrierung positionieren + verschieben
Vorteile: Unbekannte Höhen können zentriert werden, mit minimalen Verschachtelungsebenen
<style>
/* position 可选 absolute|fixed*/
.center{position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%);}
.other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<p class="center other">
<h2>这一层的内容 不会居中</h2>
</p>Tabellenzellenzentrierung
Nachteile: 1. Die Zentrierebene muss die Breite (.center) festlegen. 2. Die äußere Ebene ist eine Ebene verschachtelt (.cell) 3. Die mittlere Ebene muss die Breite (% zulässig) festlegen
<style>
.wrap{display: table;width: 100%;height: 100%;}
.cell{display: table-cell;vertical-align:middle;}
.center{width: 400px;margin-left:auto;margin-right:auto;}
.other{background-color: #ccc; height: 400px;} /* 额外的样式 可去除 */
</style>
<p class="wrap">
<p class="cell">
<p class="center other">
<h2>这一层的内容 不会居中</h2>
</p>
</p>
</p>Traditionelle Zentrierung (2 Typen)
Nachteile: 1 . margin Der Wert muss auto sein. 2. Die mittlere Ebene muss eine feste Höhe und Breite haben (% zulässig). 3. Position
<style>
/*
1. left、top、right、bottom 可以任意,但必须相等
2. position 可选 absolute|fixed
*/
.center{position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;margin: auto;width: 400px;height: 400px;}
.other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<p class="center other">
<h2>这一层的内容 不会居中</h2>
</p>muss verwendet werden. Nachteile: Die mittlere Ebene muss eine feste Höhe und Breite haben, und Magin muss vorhanden sein berechnet sich aus Höhe und Breite.
<style>
.wrap{position: relative;height: 100%;}
.center{position: absolute;left: 50%;top: 50%; width: 400px;height: 300px; margin-left: -200px;margin-top: -150px;}
.other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<p class="wrap">
<p class="center other">
<h2>这一层的内容 不会居中</h2>
</p>
</p>Verwandte Empfehlungen:
Wie zentriert man den Inhalt vertikal und horizontal, wenn man eine modale Box schreibt?
Über die Verwendung von CSS zur vertikalen und horizontalen Zentrierung von Text und Bildern
Das obige ist der detaillierte Inhalt vonDie 5 besten Lösungen für die vertikale und horizontale CSS-Zentrierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
