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
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>
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;
}
/* 公共代码 *//* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}<div> <div>123123</div> </div>
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}<div> <div>123123</div> </div>
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: calc(50% - 50px);
left: calc(50% - 50px);
}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>
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div> <div>123123</div> </div>
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; /* 修正文字 */
}text-alignSchreibmodusvertical-align
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>
Der Anzeigeeffekt ist wie folgt:
.div2 {
writing-mode: vertical-lr;
} 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
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.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;
}|
123123
|
点击查看完整DEMO
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作为现代的布局方案，颠覆了过去的经验，只需几行代码就可以优雅的做到水平垂直居中
<div> <div>123123</div> </div>
.wp {
display: flex;
justify-content: center;
align-items: center;
}目前在移动端已经完全可以使用flex了，PC端需要看自己业务的兼容性情况
点击查看完整DEMO
感谢@一丝姐 反馈的这个方案，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
}相关推荐：
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
