Heim  >  Artikel  >  Web-Frontend  >  Wie zentriere ich ein Div?

Wie zentriere ich ein Div?

WBOY
WBOYOriginal
2024-07-17 13:52:07594Durchsuche

How to center a div?

So zentrieren Sie ein Div in CSS

Ein Div zu zentrieren ist das Unmöglichste

1. Zentrierung mit Flexbox

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>

2. Zentrierung mit Raster

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>

3. Zentrierung mit absoluter Positionierung

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>

4. Zentrierung mit Margin Auto

Für eine einfache horizontale Zentrierung verwenden Sie margin: auto:

.centered-div {
    width: 50%;
    margin: 0 auto;
}
<div class="centered-div">Centered Content</div>

5. Zentrierung mit Margin Auto

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn