Comment centrer parfaitement une div horizontalement et verticalement tout en préservant le contenu ?

Centrage horizontal et vertical d'un div avec préservation du contenu

Dans le domaine du développement Web, il est souvent nécessaire de centrer un div à la fois horizontalement et verticalement. Bien que les méthodes traditionnelles telles que le positionnement absolu et les marges négatives puissent y parvenir, elles coupent souvent le contenu lorsque le div n'est pas entièrement visible. Cet article présente une solution qui garantit que le contenu est toujours affiché, quelle que soit la taille de la fenêtre.

Solution de navigateur moderne : Flexbox

Pour les navigateurs modernes, flexbox offre une solution élégante à ce problème. Avec flexbox, le contenu peut être centré en définissant le conteneur parent pour afficher : flex et le div enfant sur margin : auto.

<div class="parent">
  <div class="child">This works with any content</div>
</div>

.parent {
  display: flex;
}

.child {
  margin: auto;
}

Prise en charge des navigateurs plus anciens

Pour les navigateurs qui ne prennent pas en charge flexbox, des transformations CSS peuvent être utilisées. En définissant le div sur position : absolue, gauche : 50 % et haut : 50 %, puis en appliquant une transformation de traduction (-50 %, -50 %), le div sera centré.

<div class="content">This works with any content</div>

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

En utilisant des transformations flexbox ou CSS, on peut centrer un div à la fois horizontalement et verticalement, garantissant que le contenu est toujours visible, quelle que soit la taille 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!