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.
Bevor Sie mit dem Erlernen von zentriertem CSS-Code beginnen, müssen Sie zunächst einige grundlegende Konzepte verstehen.
Es gibt viele Möglichkeiten, ein horizontal zentriertes Layout zu implementieren, aber das Wesentliche besteht darin, den linken und rechten Rand des Elements anzugleichen.
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方法实现。
这种方法也比较常用，适用于父元素与子元素都是块级元素，且子元素的宽度固定。通过设定左右margin为auto，使两边边距相等，从而将元素居中。
父元素 {
width: 60%;
}
子元素 {
width: 80%;
margin: 0 auto;
}注意，这种布局方式需要父元素设置宽度，否则子元素无法对齐。
如果您的布局正在使用flexbox，那么您可以使用以下CSS代码将元素水平居中。
父元素 {
display: flex;
justify-content: center;
}以上代码将在x轴方向使子元素居中。
如果使用grid布局，可以使用以下CSS样式将元素水平对齐。
父元素 {
display: grid;
place-items: center;
}place-items属性可以同时使子元素在水平和垂直方向上对齐，可以在下面的小结中看到。
实现垂直居中布局的方法同样有多种，这里介绍几种方法。
这是一种非常简单和常用的方法，适用于单行文本和图片。给父元素和子元素分别设置相同的line-height值，即可实现垂直对齐。
父元素 {
line-height: 100px;
}
子元素 {
line-height: 100px;
}这里需要注意，父元素的高度必须是子元素的整数倍。
这种方法将子元素的position属性设为absolute，然后使用top和bottom对其进行对齐。
父元素 {
position: relative;
height: 200px;
}
子元素 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}这种方法适用于容器高度固定，子元素高度未知的情况下。
这种方法需要将容器使用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.
父元素 {
display: flex;
align-items: center;
justify-content: center;
}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. 🎜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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
