Comment puis-je centrer horizontalement et verticalement un DIV tout en préservant son contenu ?

Centrer un DIV horizontalement et verticalement avec préservation du contenu

Dans les situations où l'alignement d'un DIV à la fois horizontalement et verticalement est crucial et où le contenu doit rester intact, il est nécessaire de trouver des approches qui évitent les inconvénients du positionnement absolu avec des marges négatives.

Tout en flexbox propose une solution moderne qui aligne bien le contenu, elle peut ne pas convenir aux navigateurs plus anciens. Pour une compatibilité plus large, envisagez la méthode suivante :

HTML :

<div>

CSS :

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Cette approche utilise le positionnement absolu et les transformations CSS (-webkit-transform et transformer) pour centrer le DIV. La fonction de transformation décale la position du DIV de la moitié de sa largeur et de sa hauteur dans les deux sens. Cela garantit que le contenu est préservé quelle que soit la taille de la fenêtre ou les variations du contenu.

Explorez cette technique plus en détail sur Codepen ou JSBin pour constater son efficacité. Pour la prise en charge des navigateurs plus anciens, des méthodes alternatives évoquées ailleurs dans ce fil peuvent être nécessaires.

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!