Heim >Web-Frontend >CSS-Tutorial >So legen Sie die Gesamtzentrierung in CSS fest
So legen Sie die Gesamtzentrierung in CSS fest
- 下次还敢Original
- 2024-04-25 12:39:15907Durchsuche
Verwenden Sie CSS, um eine allgemeine Zentrierung zu erreichen: Set align-items: center für die vertikale Zentrierung. Legen Sie justify-content:center für die horizontale Zentrierung fest. Wenn Sie die Eigenschaften align-items und justify-content gemeinsam festlegen, wird das gesamte Element zentriert.
So legen Sie die Gesamtzentrierung mit CSS fest
Im Webdesign müssen Sie manchmal alle Inhalte zentriert ausrichten, was durch die Verwendung der CSS-Eigenschaften align-items und justify-content erreicht werden kann.
align-items-Eigenschaft
align-items-Eigenschaft wird verwendet, um die vertikale Ausrichtung von Elementen (Flex-Elementen) im Container festzulegen. Wenn align-items auf „center“ eingestellt ist, werden die Elemente vertikal zentriert:
<code class="css">.container {
display: flex;
align-items: center;
}</code>
justify-content-Eigenschaft
justify-content-Eigenschaft wird verwendet, um die horizontale Ausrichtung von Elementen (Flex-Elementen) im Container festzulegen. Wenn Sie „justify-content“ auf „center“ setzen, werden die Elemente horizontal zentriert:
<code class="css">.container {
display: flex;
justify-content: center;
}</code>
Das Ganze zentrieren
Um das Ganze zu zentrieren, müssen Sie sowohl die Eigenschaften „align-items“ als auch „justify-content“ festlegen:
<code class="css">.container {
display: flex;
align-items: center;
justify-content: center;
}</code>
Beispiel
Das folgende Beispiel zeigt, wie man CSS verwendet, um alle Inhalte auf einer Webseite zu zentrieren:
<code class="html"><!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html></code>Das obige ist der detaillierte Inhalt vonSo legen Sie die Gesamtzentrierung in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!