Comment centrer une division en CSS

Centrer un div est la chose la plus impossible

1. Centrage avec Flexbox

Flexbox est un moyen moderne de centrer le contenu verticalement et horizontalement :

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

    
Centered Content

2. Centrage avec grille

CSS Grid peut également centrer le contenu :

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

    
Centered Content

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%);
}

    
Centered Content

4. Centrage avec marge automatique

Pour un centrage horizontal simple, utilisez margin: auto:

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

Centered Content

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;
}

    
Centered Content