Quelles sont les méthodes de centrage CSS ?

1.text-align:center;

Utiliser la méthode ci-dessus pour centrer consiste à centrer horizontalement les éléments en ligne ou le texte de display:inline;

2.inline-height:(height) value;

Lors de l'utilisation de inline-height, il est souvent utilisé avec height pour centrer le contenu verticalement. recommandé de l'utiliser dans la liste Utilisé en interne

3.margin:auto;

Lors de l'utilisation de la marge au centre, généralement lorsque l'élément donne la largeur exacte value, set margin :auto; ou margin: 0 auto; ont le même effet : l'élément actuel sera centré horizontalement

Lorsque vous utilisez margin, vous pouvez également définir les valeurs de margin-left et margin ; -droit pour être égal, et vous pouvez également réaliser un centrage horizontal ;

4. Positionnement et centrage

Le réglage selon le haut et la gauche ou le bas et la droite peut. centrer l'élément horizontalement et verticalement ; mais la hauteur de l'élément parent doit être définie ;

5.Flex box

Flex-align:center du conteneur Flex;

align-items:center;

justifier-cotent:center;

Attribut du projet align-self:center;

6. :

 1 .box { 2     width: 600px; 3     height: 400px; 4     position: relative; 5 } 
 6  7 .box1 { 8     width: 300px; 9     height: 200px;10     padding: 20px;11     position: absolute;12     top: 50%;13     left: 50%;14     margin-left: -170px;/*(width+padding)/2 */15     margin-top: -120px;/*(height+padding)/2 */16 }

　Le code ci-dessus peut réaliser un centrage horizontal et vertical des éléments.

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!