Centrer verticalement du contenu avec CSS (méthode simple)

Alignons verticalement vos éléments de design avec CSS et HTML ! Même si beaucoup de gens cherchent cette méthode, centrer du contenu verticalement est plus difficile qu’il n’y paraît pour un débutant. La méthode ci-dessous est l’une des plus simples pour y parvenir.

Démo : aligner verticalement au centre avec CSS

HTML

Copiez le code ci-dessous et collez-le dans votre document HTML.

<div class="div-outer">
    <div class="div-inner">
        <h4>Box One</h4>
        <p>Vertical Align Center</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
        <h4>Box Two</h4>
        <p>Vertical Align Middle</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
        <h4>Box Three</h4>
        <p>Vertical Align Center</p>
    </div>
</div>

CSS

Copiez le code ci-dessous et collez-le dans votre fichier CSS. Le div extérieur doit avoir le même min-height et line-height ; dans cet exemple, les deux valent 200px.

.div-outer {
    min-height: 200px;
    line-height: 200px;
}
.div-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

Si ce CSS ne fonctionne pas chez vous, essayez l’alternative ci-dessous.

.div-outer {
    height: 80vh;
    position: relative;
}
.div-inner {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

Vous pouvez modifier les couleurs des boîtes et du texte. Amusez-vous bien !