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

Centrer un DIV horizontalement et verticalement sans couper le contenu

Lorsque vous cherchez à centrer verticalement et horizontalement un DIV, il est crucial de s'assurer que le contenu reste intact même si la fenêtre devient plus petit que le contenu lui-même.

Une approche courante implique un positionnement absolu et des marges négatives. Cependant, cette méthode peut conduire à couper le contenu lorsque la taille de la fenêtre diminue.

Pour les navigateurs modernes, une meilleure solution est disponible en utilisant Flexbox :

HTML

<div>

CSS

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

Cette approche utilise des transformations pour traduire le contenu sans affecter sa taille. De ce fait, le contenu reste centré quelles que soient les dimensions de la fenêtre.

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!