Zusammenfassung von 10 Möglichkeiten, mit CSS eine horizontale und vertikale Zentrierung zu erreichen, die es wert ist, gesammelt zu werden

Dieser Artikel bietet Ihnen eine Zusammenfassung von 10 Möglichkeiten, wie Sie eine horizontale und vertikale Zentrierung in CSS erreichen können. Ich hoffe, dass er Ihnen als Referenz dienen wird.

Markieren Sie die wichtigsten Punkte. Diese Frage wird mir oft gestellt >

Es scheint sehr einfach zu sein, den Effekt des obigen Bildes zu erzielen, aber tatsächlich gibt es verborgene Geheimnisse. Dieser Artikel fasst die folgenden Möglichkeiten zusammen, um eine horizontale und vertikale Zentrierung in CSS zu erreichen eins. Nur ​​zentrierte Elemente werden definiert. Breite und Höhe gelten

absolut + negativer Rand

• absolut + Rand automatisch

• absolut + berechnet

• Das zentrierte Element hat variable Breite und Höhe

absolut + transformieren

• Zeilenhöhe

• Schreibmodus

• Tabelle

• CSS-Tabelle

• flex

• Gitter

• absoluter + negativer Rand
  Um den oben genannten Effekt zu erzielen, führen wir zunächst einige vorbereitende Arbeiten unter der Annahme durch, dass HTML Der Code lautet wie folgt: Insgesamt gibt es zwei Elemente, ein übergeordnetes Element und ein untergeordnetes Element.

<div>
    <div>123123</div>
</div>

wp ist der Klassenname des übergeordneten Elements ist box der Klassenname des untergeordneten Elements. Da es einen Unterschied zwischen fester Breite und variabler Breite gibt, wird die Größe zur Angabe der angegebenen Breite verwendet. Das Folgende ist der gemeinsame Code, der für alle Effekte verwendet wird und hauptsächlich die Einstellung vornimmt Farbe, Breite und Höhe

Hinweis: Dieser allgemeine Code wird später nicht wiederholt, es wird nur die entsprechende Eingabeaufforderung gegeben

/* 公共代码 */
.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}

.box {
    background: green;    
}

.box.size{
    width: 100px;
    height: 100px;
}
/* 公共代码 */

Der Prozentsatz der absoluten Positionierung ist relativ zu Durch diese Funktion kann das untergeordnete Element in der Mitte angezeigt werden, die absolute Positionierung basiert jedoch auf der oberen linken Ecke des untergeordneten Elements ist zentriert. Um dieses Problem zu beheben, können Sie den negativen Wert des Rands verwenden, indem Sie den Rand des untergeordneten Elements als negativen Wert angeben Das ist die halbe Breite des untergeordneten Elements. Sie können das untergeordnete Element zentrieren lassen.

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

Dies ist meine am häufigsten verwendete Methode, die einfacher zu verstehen ist und eine gute Kompatibilität aufweist . Der Nachteil ist, dass Sie die Breite und Höhe des untergeordneten Elements kennen müssen Klicken Sie, um die vollständige DEMO anzuzeigen

absolut + Rand automatisch

Diese Methode erfordert dies auch Die Breite und Höhe des zentrierten Elements muss festgelegt werden. Der HTML-Code lautet wie folgt:

<div>
    <div>123123</div>
</div>

Diese Methode wird festgelegt durch Der Abstand in alle Richtungen beträgt 0. Wenn der Rand zu diesem Zeitpunkt auf „Auto“ eingestellt ist, es kann in alle Richtungen zentriert werden

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

Diese Methode ist auch sehr kompatibel. Der Nachteil besteht darin, dass Sie die Breite und Höhe der untergeordneten Elemente kennen müssen.

Klicken Sie hier, um die vollständige DEMO anzuzeigen

absolut + berechnet

Diese Methode erfordert auch, dass die Breite und Höhe des zentrierten Elements festgelegt werden müssen, daher fügen wir der Box eine Größenklasse hinzu. Der HTML-Code lautet wie folgt

<div>
    <div>123123</div>
</div>

Vielen Dank an CSS3 für die Bereitstellung der berechneten Eigenschaften. Da der Prozentsatz von oben auf der oberen linken Ecke des Elements basiert, subtrahieren Sie einfach die Hälfte der Breite. Der Code lautet wie folgt

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

Die Kompatibilität Da diese Methode auf der Kompatibilität von calc basiert, besteht der Nachteil darin, dass Sie die Breite und Höhe des untergeordneten Elements kennen müssen

Klicken Sie hier, um die vollständige DEMO anzuzeigen

absolut + transformieren

oder absolute Positionierung, aber diese Methode erfordert kein untergeordnetes Element. Das Element hat eine feste Breite und Höhe, sodass die Größenklasse nicht mehr benötigt wird. Der HTML-Code lautet wie folgt

<div>
    <div>123123</div>
</div>

Um das Absolute festzulegen Bei Positionierungsproblemen können Sie auch die neue Transformation in CSS3 verwenden. Aufgrund ihrer eigenen Breite und Höhe können Sie die Übersetzung auf -50% setzen, um eine Zentrierung zu erreichen ist wie folgt

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Die Kompatibilität dieser Methode hängt von der Kompatibilität von Translate2d ab

Klicken Sie auf Vollständige DEMO anzeigen

lineheight

Verwenden des Zentrierattributs von Inline-Elemente können Sie auch horizontal und vertikal zentrieren. Der HTML-Code lautet wie folgt:

<div>
    <div>123123</div>
</div>

Setzen Sie das Feld als Inline-Element ein.

Sie können es horizontal zentrieren, aber viele Schüler wissen das möglicherweise nicht kann es auch vertikal durch

zentrieren. Der Code lautet wie folgt:

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.box {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */
}

Diese Methode erfordert das Zurücksetzen der Textanzeige im untergeordneten Element auf den gewünschten Effekt

Klicken Sie hier, um die vollständige DEMO anzuzeigen

text-alignSchreibmodusvertical-align

Viele Schüler müssen wie ich sein und kennen das Attribut

nicht. Danke an Lehrer @张髫兴 für das Feedback, es ist einfach. Beispielsweise kann sich der Schreibmodus ändern Sie können beispielsweise den Schreibmodus verwenden, um die Anzeigerichtung von Text in die vertikale Richtung zu ändern.

<div>水平方向</div>
<div>垂直方向</div>

e

Der Anzeigeeffekt ist wie folgt:

.div2 {
    writing-mode: vertical-lr;
}

Was noch erstaunlicher ist dass alle horizontalen CSS-Attribute in der Richtung zu Attributen in der vertikalen Richtung werden, z. B.

. Horizontale und vertikale Zentrierung können durch

und writing-mode erreicht werden, aber es ist etwas problematischer

水平方向
垂
直
方
向

<div>
    <div>
        <div>123123</div>
    </div>
</div>

Diese Methode ist etwas kompliziert zu implementieren und zu verstehen

Klicken Sie, um die vollständige DEMO anzuzeigentext-alignwriting-modeTabelletext-align

Tabelle wurde früher für das Seitenlayout verwendet, aber niemand macht es jetzt Dies ist fertig, aber die Tabelle kann auch horizontal und vertikal zentriert werden, aber es wird viel redundanter Code hinzugefügt

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    writing-mode: vertical-lr;
    text-align: center;
}
.wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.box {
    display: inline-block;
    margin: auto;
    text-align: left;
}

Der Inhalt in der Tabellenzelle ist natürlich vertikal zentriert, fügen Sie einfach eine horizontale Zentrierung hinzu Attribut

                                        

                

123123

            

Diese Methode ist zu redundant und entspricht nicht der korrekten Verwendung von Tabelle

点击查看完整DEMO

css-table

css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中

<div>
    <div>123123</div>
</div>

下面通过css属性，可以让p显示的和table一样

.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

这种方法和table一样的原理，但却没有那么多冗余代码，兼容性也还不错

点击查看完整DEMO

flex

flex作为现代的布局方案，颠覆了过去的经验，只需几行代码就可以优雅的做到水平垂直居中

<div>
    <div>123123</div>
</div>

.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}

目前在移动端已经完全可以使用flex了，PC端需要看自己业务的兼容性情况

点击查看完整DEMO

grid

感谢@一丝姐 反馈的这个方案，css新出的网格布局，由于兼容性不太好，一直没太关注，通过grid也可以实现水平垂直居中

<div>
    <div>123123</div>
</div>

.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

代码量也很少，但兼容性不如flex，不推荐使用

点击查看完整DEMO

总结

下面对比下各个方式的优缺点，肯定又双叒叕该有同学说回字的写法了，简单总结下

• PC端有兼容性要求，宽高固定，推荐absolute + 负margin

• PC端有兼容要求，宽高不固定，推荐css-table

• PC端无兼容性要求，推荐flex

• 移动端推荐使用flex

小贴士：

方法	居中元素定宽高固定	PC兼容性	移动端兼容性
absolute + 负margin	是	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
absolute + margin auto	是	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
absolute + calc	是	ie9+, chrome19+, firefox4+	安卓4.4+, iOS6+
absolute + transform	否	ie9+, chrome4+, firefox3.5+	安卓3+, iOS6+
writing-mode	否	ie6+, chrome4+, firefox3.5+	安卓2.3+, iOS5.1+
lineheight	否	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
table	否	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
css-table	否	ie8+, chrome4+, firefox2+	安卓2.3+, iOS6+
flex	否	ie10+, chrome4+, firefox2+	安卓2.3+, iOS6+
grid	否	ie10+, chrome57+, firefox52+	安卓6+, iOS10.3+

最近发现很多同学都对css不够重视，这其实是不正确的，比如下面的这么简单的问题都有那么多同学不会，我也是很无语

<div>123</div>
<div>123</div>

.red {
    color: red
}

.blue {
    color: blue
}

相关推荐：

CSS实现div水平垂直居中的五种方法

css 实现DIV水平垂直居中于屏幕

Das obige ist der detaillierte Inhalt vonZusammenfassung von 10 Möglichkeiten, mit CSS eine horizontale und vertikale Zentrierung zu erreichen, die es wert ist, gesammelt zu werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!