Centrer horizontalement un bloc d’une taille fixe

Pour centrer horizontalement un bloc d’une taille fixe, on peut utiliser la propriété margin: auto. Attention si l’élément que vous ciblez est en display-inline, il faut le transformer en block.

    width: 500px;
    margin: 0 auto;

Comment cela fonctionne-t-il ? Le margin: 0 auto; revient à dire au navigateur que les marges de gauche et droite seront identiques et que leur valeur sera calculée de manière automatique. Le navigateur calcule donc des marges de même taille de chaque côté.

See the Pen Qwebop by 1ud0v1c (@1ud0v1c) on CodePen.

Centrer horizontalement des éléments de type inline

Afin de centrer des éléments de type inline au sein d’un bloc, il suffit d’utiliser la propriété text-align. Elle permet de contrôler l’alignement de tous les éléments inline contenus dans le bloc parent. Il suffit donc de faire :

    <div class="bloc-conteneur">
        <img src="..." alt="" />
    </div>

    .bloc-conteneur {
        text-align: center;
    }

See the Pen YPmXbm by 1ud0v1c (@1ud0v1c) on CodePen.

Centrer verticalement une ligne de texte dans un bloc de hauteur fixe

Afin de centrer du texte verticalement dans un bloc de taille, on peut utiliser la propriété line-height. Cela consiste à spécifier l’espace vertical entre les lignes de textes.

    <div id="header">
        <p>Lorem ipsum...</p>
    </div>

    #header {
        height: 150px;
    }
    #header p {
        line-height: 150px;
    }

Le désavantage de cette technique, c’est qu’à partir du moment ou le texte sera sur plus d’une ligne, cette solution ne fonctionne plus.

See the Pen wBVaVz by 1ud0v1c (@1ud0v1c) on CodePen.

Centrer verticalement une image à côté d’un texte dans un bloc de hauteur variable

Pour centrer une image à côté d’un texte, c’est assez simple il suffit d’utiliser la propriété vertical-align. En effet, on peut ainsi gérer l’alignement d’un texte, on va donc pouvoir aligner l’image en lui disant de s’aligner au milieu de la ligne de base.

    <p>Lorem ipsum etc...
       <img src="..." alt="" />
    </p>

    img {
        vertical-align: middle;
    }

See the Pen wBVKwz by 1ud0v1c (@1ud0v1c) on CodePen.

Voici les propriétés que peut prendre vertical-align :

• baseline : alignement sur la ligne de base ou le bas
• middle : alignement au milieu de la ligne de base
• sub : alignement en bas de la ligne de base
• super : alignement au-dessus de la ligne de base
• text-top/bottom : aligne le texte en haut/bas de l’élément parent
• longueur/pourcentage : alignement au-dessus ou au-dessous de la ligne de base avec des unités absolues / des valeurs relatives

Centrer verticalement un bloc dans un autre de tailles variables

Première méthode : display:table

Si vous avez besoin d’un contenu dynamique et que vous ne connaissez pas la longueur du texte. Voici une première méthode qui utilise la propriété display: table.

<div id="main-container">
    <div id="content">test</div>
</div>

    #main-container {
        display:table;
    }
    #content {
        display:table-cell; 
        vertical-align:middle;
    }

See the Pen VYovZo by 1ud0v1c (@1ud0v1c) on CodePen.

Attention, cette méthode ne fonctionne pas sous IE7 (mais qui l’utilise de nos jours :3).

Seconde méthode : position absolute

On peut center horizontalement et verticalement un élément en display: block dans une page si celui-ci possède une taille fixe, pour ce faire, c’est plutôt simple, on créer notre bloc et on lui définit une hauteur et une largeur. On lui assigne alors la propriété absolute. Ensuite, on le centre avec un left: 50% et un top: 50%. Mais, comme il va faire le décalage par rapport au centre de la div, il faudra donc soustraire la largeur et la hauteur en les divisant par deux. Ce qui nous donne :

#content {
    width: 500px;
    height: 150px;
  
    position: absolute;

    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -75px;  
  
    background: #2588F5;
    color: white;
    padding: 15px;
}

See the Pen doowEy by 1ud0v1c (@1ud0v1c) on CodePen.

Troisième méthode : transform

Il est également possible d’utiliser la propriété transform: translateY afin de centrer verticalement un bloc dans un autre même si on ne connait pas sa taille. La propriété transform est généralement utilisée pour appliquer une rotation ou une transformation sur un élément mais on va également pouvoir l’utiliser pour centrer notre bloc. Toutefois on aura besoin d’avoir notre bloc positionné en absolute.

    #main-container {
       position: relative;
       -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
       transform-style: preserve-3d;
    }
    #content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

See the Pen VYovZo by 1ud0v1c (@1ud0v1c) on CodePen.

Cette méthode fonctionne jusqu’à IE9 inclu ! On précise sur l’élément parent qu’il doit préserver le style 3D afin de corriger un effet de flou qui peut être présent sous certaines versions d’IE.

Quatrième méthode : flexbox

Une nouvelle propriété assez récente et étonnamment bien supporté c’est la propriété flexbox, cette dernière est compatible à partir de IE10.

    #main-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

See the Pen PwMPqN by 1ud0v1c (@1ud0v1c) on CodePen.

Voilà, si vous en connaissez d’autres techniques intéressantes pour centrer un élément n’hésitez pas à les partager.