Comment centrer un div ?

Comment centrer une division en CSS

Centrer un div est la chose la plus impossible

1. Centrage avec Flexbox

Flexbox est une manière moderne de centrer le contenu verticalement et horizontalement :

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

<div class="container">
    <div class="centered-div">Centered Content</div>
</div>

2. Centrage avec grille

CSS Grid peut également centrer le contenu :

.container {
    display: grid;
    place-items: center;
    height: 100vh;
}

<div class="container">
    <div class="centered-div">Centered Content</div>
</div>

3. Centrage avec positionnement absolu

Vous pouvez centrer un div en utilisant le positionnement absolu :

.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. Centrage avec marge automatique

Pour un centrage horizontal simple, utilisez margin: auto:

.centered-div {
    width: 50%;
    margin: 0 auto;
}

<div class="centered-div">Centered Content</div>

5. Centrage avec marge automatique

Pour les éléments en ligne ou en bloc en ligne :

.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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!