So verwenden Sie CSS, um ein zentriertes Layout zu erreichen (Codecode)

Im Webdesign ist die Zentrierung eine sehr verbreitete Layoutmethode. Viele Webdesigns verwenden mittlerweile ein zentriertes Layout, um Benutzern ein besseres Erlebnis zu bieten, und die CSS-zentrierte Implementierung ist ebenfalls sehr einfach und wichtig.

Lassen Sie uns besprechen, wie Sie CSS-Code verwenden, um ein zentriertes Layout in der Front-End-Entwicklung zu erreichen.

Grundlegende Konzepte der Zentrierung

Bevor Sie mit dem Erlernen von zentriertem CSS-Code beginnen, müssen Sie zunächst einige grundlegende Konzepte verstehen.

1. Horizontale Zentrierung: Die horizontale Ausrichtung ist die zentrierte Ausrichtung, die normalerweise angewendet wird, wenn die Breite von Seitenelementen nicht 100 % beträgt, wie z. B. Textfelder, Schaltflächen usw.
2. Vertikale Zentrierung: Die vertikale Ausrichtung ist die zentrierte Ausrichtung, die normalerweise angewendet wird, wenn die Höhe von Seitenelementen nicht 100 % beträgt, wie z. B. einzelne Textzeilen, Bilder usw.
3. Horizontale und vertikale Zentrierung: Zentrierung gleichzeitig horizontal und vertikal.

Horizontale Zentrierung

Es gibt viele Möglichkeiten, ein horizontal zentriertes Layout zu implementieren, aber das Wesentliche besteht darin, den linken und rechten Rand des Elements anzugleichen.

1. text-align

Dies ist die am häufigsten verwendete Methode, die sich eignet, wenn das übergeordnete Element ein Blockebenenelement (z. B. div) ist und Attribute für Inline-Elemente (z. B. Text) festlegt.

父元素 {
    text-align: center;
}
子元素 {
    display: inline-block;
}

Diese Methode erfordert das Setzen des untergeordneten Elements auf inline-block, um eine Ausrichtung zu erreichen, andernfalls kann dies nur mit der Margin-Methode erreicht werden. inline-block，才能实现对齐方式，否则只能使用margin方法实现。

2. margin

这种方法也比较常用，适用于父元素与子元素都是块级元素，且子元素的宽度固定。通过设定左右margin为auto，使两边边距相等，从而将元素居中。

父元素 {
    width: 60%;
}
子元素 {
    width: 80%;
    margin: 0 auto;
}

注意，这种布局方式需要父元素设置宽度，否则子元素无法对齐。

3. flex

如果您的布局正在使用flexbox，那么您可以使用以下CSS代码将元素水平居中。

父元素 {
    display: flex;
    justify-content: center;
}

以上代码将在x轴方向使子元素居中。

4. grid

如果使用grid布局，可以使用以下CSS样式将元素水平对齐。

父元素 {
    display: grid;
    place-items: center;
}

place-items属性可以同时使子元素在水平和垂直方向上对齐，可以在下面的小结中看到。

垂直居中

实现垂直居中布局的方法同样有多种，这里介绍几种方法。

1. line-height

这是一种非常简单和常用的方法，适用于单行文本和图片。给父元素和子元素分别设置相同的line-height值，即可实现垂直对齐。

父元素 {
    line-height: 100px;
}
子元素 {
    line-height: 100px;
}

这里需要注意，父元素的高度必须是子元素的整数倍。

2. absolute

这种方法将子元素的position属性设为absolute，然后使用top和bottom对其进行对齐。

父元素 {
    position: relative;
    height: 200px;
}
子元素 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

这种方法适用于容器高度固定，子元素高度未知的情况下。

3. flex

这种方法需要将容器使用flexbox布局，然后使用align-items和justify-content

margin

Diese Methode wird auch häufig verwendet und eignet sich, wenn das übergeordnete Element und das untergeordnete Element beide Elemente auf Blockebene sind und die Breite des untergeordneten Elements gleich ist behoben. Indem Sie den linken und rechten Rand auf „Automatisch“ einstellen, sorgen Sie dafür, dass die Ränder auf beiden Seiten gleich sind und zentrieren Sie das Element.

父元素 {
    display: flex;
    align-items: center;
    justify-content: center;
}

Beachten Sie, dass bei dieser Layoutmethode das übergeordnete Element die Breite festlegen muss, da die untergeordneten Elemente sonst nicht ausgerichtet werden können.

flex
Wenn Ihr Layout Flexbox verwendet, können Sie den folgenden CSS-Code verwenden, um das Element horizontal zu zentrieren. 🎜

父元素 {
    display: flex;
    align-items: center;
    justify-content: center;
}

🎜Der obige Code zentriert das untergeordnete Element in Richtung der x-Achse. 🎜
🎜🎜Gitter🎜🎜🎜🎜Wenn Sie ein Rasterlayout verwenden, können Sie die folgenden CSS-Stile verwenden, um Elemente horizontal auszurichten. 🎜rrreee🎜 Das Attribut place-items kann untergeordnete Elemente sowohl horizontal als auch vertikal ausrichten, wie in der Zusammenfassung unten zu sehen ist. 🎜🎜Vertikale Zentrierung🎜🎜Es gibt auch viele Möglichkeiten, ein vertikal zentriertes Layout zu implementieren. Hier sind einige Methoden. 🎜🎜🎜🎜Zeilenhöhe🎜🎜🎜🎜Dies ist eine sehr einfache und gängige Methode, die gut für einzelne Text- und Bildzeilen funktioniert. Eine vertikale Ausrichtung kann erreicht werden, indem für das übergeordnete Element und das untergeordnete Element derselbe Zeilenhöhenwert festgelegt wird. 🎜rrreee🎜Hier ist zu beachten, dass die Höhe des übergeordneten Elements ein ganzzahliges Vielfaches des untergeordneten Elements sein muss. 🎜
🎜🎜absolute🎜🎜🎜🎜Diese Methode setzt das Positionsattribut des untergeordneten Elements auf „absolut“ und richtet es dann mithilfe von „oben“ und „unten“ aus. 🎜rrreee🎜Diese Methode eignet sich für Fälle, in denen die Höhe des Containers fest ist und die Höhe der untergeordneten Elemente unbekannt ist. 🎜
🎜🎜flex🎜🎜🎜🎜Diese Methode erfordert die Verwendung des Flexbox-Layouts des Containers und dann die Verwendung von align-items und justify-content Code> Attribute Zentrieren Sie untergeordnete Elemente vertikal und horizontal. 🎜rrreee🎜Der obige Code zentriert das untergeordnete Element in Richtung der y-Achse. 🎜🎜Horizontale und vertikale Zentrierung🎜🎜Wenn Sie Elemente horizontal und vertikal ausrichten möchten, können Sie mehr als zwei Methoden kombinieren, um dies zu erreichen. 🎜🎜Mit dem folgenden Code wird ein horizontal und vertikal zentriertes Layout erreicht: 🎜rrreee🎜Der obige Code zentriert die untergeordneten Elemente auf der x- und y-Koordinatenachse. 🎜🎜Zusammenfassung🎜🎜Beim Frontend-Design ist das Erreichen eines zentrierten Layouts ein sehr wichtiger Teil. Hoffentlich hilft Ihnen dieser Artikel dabei, besser zu verstehen, wie zentrierter Code implementiert wird. Mithilfe von Methoden wie Textausrichtung, Rand, Flex, Raster und Absolut können Elemente sowohl in horizontaler als auch in vertikaler Richtung ausgerichtet und zentriert werden. Mithilfe dieser Methoden und Eigenschaften können Sie ganz einfach Webseiten mit gutem UI-Design erstellen. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um ein zentriertes Layout zu erreichen (Codecode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!