Résumé des méthodes pour réaliser le centrage en utilisant du CSS pur

Cet article vous présente principalement les sept principales méthodes d'utilisation du CSS pur pour réaliser le centrage, notamment la méthode de centrage par hauteur de ligne, la méthode de centrage par cellule de tableau, le positionnement haut, bas, gauche et droite + la méthode de centrage de la marge, le positionnement à 50 % + Méthode de centrage de la marge, positionnement à 50 % + méthode de centrage par translation, méthode de centrage Flexbox et méthode de centrage Flexbox + marge, les amis dans le besoin peuvent se référer et apprendre.

Avant-propos

Je me souviens d'une fois où j'étais en entretien pour un emploi, l'intervieweur a posé une question CSS : Comment rendre les éléments visibles lorsque navigation Centrez le haut, le bas, la gauche et la droite dans la fenêtre du navigateur. Je me souviens que la réponse que j'avais donnée à l'époque était d'utiliser d'abord JS pour obtenir la hauteur de la fenêtre du navigateur, puis de définir la hauteur de la ligne sur le corps comme hauteur de la fenêtre et de définir text-align:center, puis de définir l'élément display:inline- bloquer et aligner verticalement :milieu. Soupir, je me sens fatigué rien que d'y penser maintenant.

Est-ce que ça doit être JS ? N'existe-t-il pas un moyen de centrer un élément en utilisant uniquement du CSS ? La réponse est oui ! Et il y a plusieurs façons !

1. Méthode de centrage en hauteur de ligne

Élément parent : text-align: center; line-height:600px; font-size: 0;

Élément enfant : display: inline-block; vertical-align: middle;

Remarque : 600px doit être la hauteur de l'élément parent. Une autre chose à noter ici est que la taille de la police doit être définie sur zéro. cet attribut n'est pas écrit, cela aura pour conséquence que l'élément ne sera pas centré verticalement avec précision. Cette méthode est la méthode à laquelle j'ai répondu lors de l'entretien. Les défauts sont évidents. La hauteur de l'élément parent doit être déterminée. (Compatible avec IE8+)

2. Méthode de centrage des cellules du tableau

Élément parent : display: table-cell; text-align: center; vertical-align: middle;

Élément enfant : display: inline-block;

Remarque : Compatible avec IE8+

3. positionnement à droite + méthode de centrage de la marge

Élément parent : position: relative;

Élément enfant : position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;

Remarque : Compatible avec IE8+

4. Positionnement à 50 % + méthode de centrage de la marge

Élément parent : position: relative;

Élément enfant : position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -200px;

Remarque : 200px doit être la moitié de la largeur et de la hauteur de l'élément enfant. Par exemple, si l'élément enfant mesure 100 px de large et 50 px de haut, la valeur de la marge est -25px 0 0 -50px. L'inconvénient de cette méthode est qu'il faut déterminer la largeur et la hauteur des éléments enfants. (Compatible avec IE8+)

5. Positionnement à 50 % + méthode de centrage par translation

Élément parent : position: relative;

Élément enfant : position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);

Remarque : Cette méthode utilise l'attribut de transformation CSS3 et convient aux terminaux mobiles. (Compatible avec IE9+)

6. Méthode de centrage Flexbox

Élément parent : display: flex; justify-content: center; align-items: center;

Remarque : Cette méthode utilise la disposition élastique Flexbox, et il existe également de gros problèmes de compatibilité mobile. (Compatible avec IE10+)

7. Méthode de centrage Flexbox+marge

Élément parent : display: flex;

Élément enfant : margin: auto;

Remarque : Idem que ci-dessus, compatible avec IE10+

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!