Comment centrer un div en 4

Centrer un div est depuis longtemps un mème parmi les développeurs de logiciels, en particulier les développeurs back-end comme moi, qui ont souvent des difficultés avec les technologies front-end, y compris CSS.

La bonne nouvelle est que la lutte est enfin terminée, grâce à la nouvelle propriété CSS align-content. Bien entendu, cette propriété gère uniquement l’alignement vertical. Nous en reparlerons plus tard.

Comment cela a été fait historiquement

Avant l'introduction d'align-content, nous devions généralement utiliser CSS Grid ou Flexbox pour obtenir un alignement vertical.

Exemple de grille :

<div style="display: grid; align-content: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

Exemple Flexbox :

<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

La propriété justifier-content est utilisée pour l'alignement horizontal du contenu div dans Grid et Flexbox. Pour un div normal, nous pouvons simplement utiliser text-align comme suit :

<div style="text-align: center; height: 100vh;">
    Hello World!
</div>

Comment cela se fait en 2024

Avec l'introduction d'align-content, vous n'avez plus besoin de vous fier à Grid et Flexbox, qui présentent chacun quelques inconvénients. Nous pouvons obtenir le même résultat de manière plus propre avec ce qui suit :

<div style="align-content: center; height: 100vh;">
    Hello World!
</div>

Comme mentionné précédemment, cela ne gère que l'alignement vertical. Pour l'alignement horizontal, nous pouvons toujours utiliser la propriété fiable text-align en combinaison avec align-content.

<div style="align-content: center; text-align: center; height: 100vh;">
    Hello World!
</div>

Veuillez noter que les versions minimales des navigateurs prises en charge sont Chrome 123, Firefox 125 et Safari 17.4

Ressources

• MDN Web Docs : align-content
• Construisez le vôtre : centre vertical CSS

Crédits des images en vedette

• Image en vedette générée par ChatGPT

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!