Heim > Artikel > Web-Frontend > Wie zentriere ich ein Div?
Ein Div zu zentrieren ist das Unmöglichste
Flexbox ist eine moderne Möglichkeit, Inhalte sowohl vertikal als auch horizontal zu zentrieren:
.container { display: flex; justify-content: center; align-items: center; height: 100vh; }
<div class="container"> <div class="centered-div">Centered Content</div> </div>
CSS Grid kann auch Inhalte zentrieren:
.container { display: grid; place-items: center; height: 100vh; }
<div class="container"> <div class="centered-div">Centered Content</div> </div>
Sie können ein Div mithilfe der absoluten Positionierung zentrieren:
.container { position: relative; height: 100vh; } .centered-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
<div class="container"> <div class="centered-div">Centered Content</div> </div>
Für eine einfache horizontale Zentrierung verwenden Sie margin: auto:
.centered-div { width: 50%; margin: 0 auto; }
<div class="centered-div">Centered Content</div>
Für Inline- oder Inline-Block-Elemente:
.container { text-align: center; line-height: 100vh; } .centered-div { display: inline-block; vertical-align: middle; line-height: normal; }
<div class="container"> <div class="centered-div">Centered Content</div> </div>
Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!