Dieser Artikel stellt Ihnen mehrere CSS-Zentrierungslösungen vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
(Lernvideo-Sharing: CSS-Video-Tutorial)
Zum Erstellen von Inline-Elementen (z. B. Links, span oder img) zentriert ist, reicht die Verwendung von text-align: center aus. span 或img）居中，使用 text-align: center 足够了。
<div class="desk"> <span class="plate"></span> </div>
.desk {
text-align: center;
}对于多个内联元素，也可以使用text-align：center:
<div class="desk"> <span class="plate"></span> <span class="plate"></span> </div>
.desk {
text-align: center;
}使用 flexbox 也可以快速居中元素：
 "161058931156327Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)")
.desk {
display: flex;
justify-content: center;
}对于多个内联的项目，也可以正常工作：
使用网格容器时，图中的盘子将根据其网格区域居中。 请注意，除非将它们包裹在一个元素中，否则这将不适用于多个盘子。
.desk {
display: grid;
justify-content: center;
}宽度和高度已知的块元素可以通过设置margin-left:auto 和 margin-right:auto 居中元素。
.plate {
width: 120px;
height: 120px;
margin-left: auto;
margin-right: auto;
}对于多个块元素，它们应该包装在一个元素中，然后让这个父元素居中。
.tray {
display: flex;
margin-left: auto;
margin-right: auto;
}对于 flexbox 同样也是使用 justify-content:center 来居中元素：
.desk {
display: flex;
justify-content: center;
}对于多个元素，我们不需要将它们包裹在一个元素中，flexbox 可以将它们都居中。
通过绝对定位，我们可以轻松地通过CSS transform将其水平居中。
 "161058934416449Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)")
.plate {
position: absolute;
left: 50%;
transform: translateX(-50%);
}在已知元素宽度的情况下，可以使用负边距代替CSS transform。
.plate {
position: absolute;
left: 50%;
margin-left: -60px;
}垂直居中元素最简单的方法之一是使用padding:
padding-top: 24px; padding-bottom: 24px; }
vertical-align属性可用于一个或多个元素。
在此示例中，叉子和刀子应与桌子垂直居中。
.desk {
text-align: center;
}
.plate,
.fork,
.knife {
vertical-align: middle;
}为了对齐盘子，叉子和刀，我们可以使用 flexbox:
.desk {
display: flex;
justify-content: center;
align-items: center;
}通过绝对定位元素，可以使用 CSS transform将元素垂直居中：
 "161058936422055Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)")
.plate {
position: absolute;
top: 50%;
transform: translateY(-50%);
}如果知道元素高度，则可以使用负边距代替transform。
.plate {
position: absolute;
top: 50%;
margin-top: -60px;
}使用CSS网格，我们可以使用align-items将项目垂直于其网格区域居中。
.desk {
display: grid;
align-items: center;
}.plate {
text-align: center;
padding-top: 24px;
padding-bottom: 24px;
}.plate {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}通过 justify-content:center 和 align-items:center 就可以将元素垂直水平居中：
 "161058965853316Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)")
.plate {
display: flex;
justify-content: center;
align-items: center;
}通过place-items属性就可以通过，它结合了justify-content和align-items
.desk {
display: grid;
place-items: center;
} "161058930572579Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)")
🎜🎜 Für mehrere Inline-Elemente können Sie auch text-align: center verwenden:🎜rrreeerrreee🎜 "161058931156327Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)")
🎜 "161058931763751Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)")
🎜 🎜🎜CSS-Gitter🎜🎜🎜Bei Verwendung eines Gittercontainers wird die Platte im Bild basierend auf ihrer Gitterfläche zentriert. Beachten Sie, dass dies nicht mit mehreren Platten funktioniert, es sei denn, Sie wickeln sie in ein einzelnes Element ein. 🎜rrreee🎜 "161058932461536Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)")
🎜🎜 🎜Blockelement🎜🎜margin-left:auto und margin-right:auto festgelegt werden Zentriert das Element. 🎜rrreee🎜 "161058933069027Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)")
🎜🎜 Bei mehreren Blockelementen sollten diese in ein einzelnes Element eingeschlossen und dann auf diesem übergeordneten Element zentriert werden. 🎜rrreee🎜 "161058933747590Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)")
🎜< h5>🎜Flexbox🎜🎜Für Flexbox wird auch justify-content:center verwendet, um das Element zu zentrieren: 🎜rrreee🎜 "161058934416449Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)")
🎜🎜Für mehrere Elemente müssen wir sie nicht in ein Element einschließen. Flexbox kann beide zentrieren. 🎜🎜🎜CSS-Positionierung🎜🎜🎜Mit der absoluten Positionierung können wir sie einfach über CSS transform horizontal zentrieren. 🎜rrreee🎜 "161058935078145Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)")
🎜🎜 Anstelle von CSS-Transformationen können negative Ränder verwendet werden, wenn die Breite des Elements bekannt ist. 🎜rrreee🎜🎜Vertikale Zentrierung🎜🎜🎜🎜Inline-Elemente🎜🎜padding:🎜rrreee 🎜  "161058935774503Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)")
🎜vertical-align kann für ein oder mehrere Elemente verwendet werden. 🎜🎜In diesem Beispiel sollten Gabel und Messer senkrecht zum Tisch zentriert sein. 🎜rrreee "161058936422055Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)")
🎜🎜🎜Blockelement🎜🎜transform, um das Element vertikal zu zentrieren: 🎜rrreee🎜 "1610589668619810 .png")
🎜🎜Wenn Sie die Elementhöhe kennen, können Sie negative Ränder anstelle von transform verwenden. 🎜rrreeealign-items verwenden, um Elemente vertikal zu ihrem Rasterbereich zu zentrieren. 🎜rrreee🎜 "161058966390122Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)")
🎜🎜 🎜Horizontale vertikale Zentrierung🎜🎜🎜🎜Inline-Elemente🎜🎜justify-content:center und align-items:center zentrieren: 🎜rrreee🎜🎜CSS Grid🎜🎜🎜via place-items kann übergeben werden, das justify-content und align-items:🎜 kombiniert.desk {
display: grid;
place-items: center;
}更多编程相关知识，请访问：编程入门！！
Das obige ist der detaillierte Inhalt vonMehrere Optionen zur CSS-Zentrierung (Zusammenfassung). 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)
