Mehrere Optionen zur CSS-Zentrierung (Zusammenfassung)

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)

Horizontal zentriert

Inline-Elemente

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

使用 flexbox 也可以快速居中元素：

.desk {
  display: flex;
  justify-content: center;
}

对于多个内联的项目，也可以正常工作：

CSS Grid

使用网格容器时，图中的盘子将根据其网格区域居中。 请注意，除非将它们包裹在一个元素中，否则这将不适用于多个盘子。

.desk {
  display: grid;
  justify-content: center;
}

块元素

Auto Margin

宽度和高度已知的块元素可以通过设置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

对于 flexbox 同样也是使用 justify-content:center 来居中元素：

.desk {
  display: flex;
  justify-content: center;
}

对于多个元素，我们不需要将它们包裹在一个元素中，flexbox 可以将它们都居中。

CSS定位

通过绝对定位，我们可以轻松地通过CSS transform将其水平居中。

.plate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

在已知元素宽度的情况下，可以使用负边距代替CSS transform。

.plate {
  position: absolute;
  left: 50%;
  margin-left: -60px;
}

垂直居中

内联元素

Vertical Padding

垂直居中元素最简单的方法之一是使用padding:

  padding-top: 24px;
  padding-bottom: 24px;
}

Vertical Align

vertical-align属性可用于一个或多个元素。

在此示例中，叉子和刀子应与桌子垂直居中。

.desk {
  text-align: center;
}

.plate,
.fork,
.knife {
  vertical-align: middle;
}

Flexbox

为了对齐盘子，叉子和刀，我们可以使用 flexbox:

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

块元素

绝对定位

通过绝对定位元素，可以使用 CSS transform将元素垂直居中：

.plate {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

如果知道元素高度，则可以使用负边距代替transform。

.plate {
  position: absolute;
  top: 50%;
  margin-top: -60px;
}

CSS Grid

使用CSS网格，我们可以使用align-items将项目垂直于其网格区域居中。

.desk {
  display: grid;
  align-items: center;
}

水平垂直居中

内联元素

Padding 和Text Align

.plate {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

其他元素类型

绝对定位

.plate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

Flexbox

通过 justify-content:center 和 align-items:center 就可以将元素垂直水平居中：

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

CSS Grid

通过place-items属性就可以通过，它结合了justify-content和align-items

.desk {
  display: grid;
  place-items: center;
}

rrreee

🎜🎜 Für mehrere Inline-Elemente können Sie auch text-align: center verwenden:🎜rrreeerrreee🎜🎜

🎜Flexbox🎜

🎜Verwenden Sie Flexbox, um Elemente schnell zu zentrieren: 🎜rrreee🎜Für mehrere Inline-Projekte, kann auch funktionieren normalerweise: 🎜🎜🎜 🎜🎜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🎜🎜🎜 🎜Blockelement🎜🎜

🎜Automatischer Rand🎜

🎜Blockelemente mit bekannter Breite und Höhe können durch Festlegen von margin-left:auto und margin-right:auto festgelegt werden Zentriert das Element. 🎜rrreee🎜🎜🎜 Bei mehreren Blockelementen sollten diese in ein einzelnes Element eingeschlossen und dann auf diesem übergeordneten Element zentriert werden. 🎜rrreee🎜🎜< h5>🎜Flexbox🎜🎜Für Flexbox wird auch justify-content:center verwendet, um das Element zu zentrieren: 🎜rrreee🎜🎜🎜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🎜🎜🎜 Anstelle von CSS-Transformationen können negative Ränder verwendet werden, wenn die Breite des Elements bekannt ist. 🎜rrreee🎜🎜Vertikale Zentrierung🎜🎜🎜🎜Inline-Elemente🎜🎜

🎜Vertikale Polsterung🎜

🎜Eine der einfachsten Möglichkeiten, ein Element vertikal zu zentrieren, ist die Verwendung von padding:🎜rrreee 🎜 🎜

🎜 Vertikale Ausrichtung🎜

🎜Das Attribut vertical-align kann für ein oder mehrere Elemente verwendet werden. 🎜🎜In diesem Beispiel sollten Gabel und Messer senkrecht zum Tisch zentriert sein. 🎜rrreee

🎜Flexbox🎜

🎜Um Teller, Gabeln und Messer auszurichten, können wir Flexbox verwenden:🎜rrreee🎜🎜🎜🎜Blockelement🎜🎜

🎜Absolute Positionierung🎜

🎜Durch die absolute Positionierung von Elementen können Sie Verwenden Sie CSS transform, um das Element vertikal zu zentrieren: 🎜rrreee🎜🎜🎜Wenn Sie die Elementhöhe kennen, können Sie negative Ränder anstelle von transform verwenden. 🎜rrreee

🎜CSS Grid🎜

🎜Mit CSS Grid können wir align-items verwenden, um Elemente vertikal zu ihrem Rasterbereich zu zentrieren. 🎜rrreee🎜🎜🎜 🎜Horizontale vertikale Zentrierung🎜🎜🎜🎜Inline-Elemente🎜🎜

🎜Padding und Textausrichtung🎜

rrreee🎜🎜Andere Elementtypen🎜🎜

🎜Absolute Positionierung🎜

rrreee🎜🎜

🎜Flexbox🎜< / h5>🎜Sie können Elemente vertikal und horizontal über 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!