Utiliser entièrement CSS pour centrer les éléments

Cette fois, je vais vous apporter les précautions qui utilisent entièrement CSS pour réaliser le centrage des éléments et utilisent CSS pour réaliser le centrage des éléments. Vous trouverez ci-dessous un cas pratique, jetons un coup d'œil.

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 line-height sur le corps comme hauteur de la fenêtre et de définir text-align :center, puis définissez l'élément display:inline-block et vertical-align:middle. 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 de la hauteur de ligne

Élément parent : text-align: center; a href="http://www.php.cn/wiki/807.html" target="_blank">font-size<code>text-align: center; line-height:600px; <a href="http://www.php.cn/wiki/807.html" target="_blank">font-size</a>: 0; : 0;

Éléments enfants : 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. . Si ce n'est pas écrit, cette propriété fera que l'élément ne sera pas exactement centré verticalement. 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 : <a href="http://www.php.cn/wiki/902.html" target="_blank">position<code><a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>: relative; : relatif ;

Éléments enfants : 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;

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Explication détaillée de l'utilisation de focus-within

Explication détaillée de l'utilisation des pseudo-éléments ::avant et : :after

Comment l'attribut font-size-adjust optimise la mise en page des pages Web

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!