Wie zentriere ich ein 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!