CSS > Centrer une div à width variable

Quand la largeur d’une div est fixe ( width:400px), un petit coup de margin:auto et le tour est joué ; mais quand la div prend la largeur de son contenu, c’est une toute autre histoire…

Il arrive qu’on veuille adapter la largeur d’une div à son contenu. Par exemple, dans un menu, on est avec une liste dont les li sont en float, lesquels sont bien au chaud dans leur div. Vous voyez l’histoire, pourtant, cette div conteneur, on voudrait bien la centrer !

<div class="menu-wrapper">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">À propos</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Les tables à la rescousse

La solution, le display:table. L’astuce consiste à définir la margin à margin:0 auto et, IE < 8 mis à part (comme d’habitude quoi…), on est bon. Ça nous donne ça en résumé :

.menu-wrapper {
  display: table;
  margin: 0 auto;
}

Vers l’infini et…

Le fit-content !  KÉZAKO ? Cette propriété CSS au nom barbare, qui n’est pour le moment pas encore standardisée, permet tout simplement de spécifier que la div prend la taille de son contenu. Grâce à cette précision, notre protégée se comportera comme si on avait définit sa largeur, magique ! Un petit exemple pour la route :

.menu-wrapper {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    margin: auto;
}

Voilà, nous avons vaincu ce petit challenge assez récurrent dans nos développements. La deuxième solution n’est pas encore assez répandue pour être utilisée l’esprit léger en prod, mais elle présente une souplesse qui donne envie !