centré sur CSS

Centrage CSS : 1. Le centrage horizontal est obtenu via "margin: 0 auto; text-align: center" ; 2. Le centrage horizontal est obtenu via " display:flex " 3. Le centrage horizontal est obtenu via " display: table- ; cellule" et "marge gauche" réalise le centrage.

Comment définir le centrage du CSS :

1. Utilisez margin: 0 auto; text-align: center pour obtenir le centrage horizontal du CSS.

Cette méthode est la plus couramment utilisée pour réaliser le centrage horizontal du CSS. Environ 60 % du centrage horizontal du CSS dans le développement front-end est obtenu via "margin : 0 auto ; text-align : center".

2. Utilisez display:flex pour réaliser le centrage horizontal du CSS.

Avec de plus en plus de compatibilité flexbox, la solution de centrage horizontal des CSS via "display:flex" devient de plus en plus populaire.

Le principe du centrage horizontal CSS via display:flex est que l'élément parent display:flex;flex-direction:column; et l'élément enfant align-self:center;

C'est le même que le principe du centrage vertical CSS , sauf dans flex Il y a des différences dans la direction, l'une est une ligne (valeur par défaut) et l'autre est une colonne.

3. Implémentez le centrage horizontal CSS via display:table-cell et margin-left.

Pour les situations où la largeur de l'élément parent et de l'élément enfant est déterminée, il convient d'implémenter le centrage horizontal CSS via display:table-cell et margin-left.

Lorsqu'il est utilisé, l'élément parent affiche : table-cell et l'élément enfant reçoit une marge gauche de la moitié de la largeur restante.

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!