Comment centrer verticalement et horizontalement un DIV sans couper le contenu ?

Centrage vertical et horizontal d'un DIV sans découpage du contenu

Votre préoccupation concernant le centrage d'un DIV verticalement et horizontalement sans couper le contenu est un commun. Bien que l'approche traditionnelle utilisant le positionnement absolu et les marges négatives puisse fonctionner, elle peut conduire à la coupure du contenu si la taille de la fenêtre devient plus petite que le contenu DIV.

Heureusement, pour les navigateurs modernes, il y a des plus avancés options :

Flexbox

HTML :

<div>

CSS :

.content {<br> position : absolue ;<br> gauche : 50 %;<br> haut : 50 %;<br> -webkit-transform : traduire (-50 %, -50 %) ;<br> transformation : traduire ( -50%, -50%);<br>}<br>

Ceci La solution utilise la propriété transform pour traduire le contenu DIV de 50 % dans les deux sens, garantissant que son centre s'aligne avec le centre de la fenêtre.

Remarque : Flexbox n'est pas largement pris en charge dans les anciens navigateurs, il est donc important de prendre en compte la compatibilité des navigateurs lors de la mise en œuvre de cette solution.

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!