L'erreur est à :hover 选择器中，因为转换中没有 translate() et vous la réinitialisez à 0, ce qui n'est pas ce que vous voulez. Parce qu'il oubliera le contenu précédent et l'écrasera.

Voici une solution simple :

❌

.zoom:hover {
  transform: scale(1.5); 
}

✅

.zoom:hover {
  transform: 
     scale(1.5)
     translate(-50%, -50%); /* add this */
}

Voici une explication simple :

Solution moderne (moins de code) :

Utilisez CSS Grid https://developer.mozilla.org/ en-US/docs/Web/CSS/grid

Utilisez place-items et il se centrera automatiquement sans aucune transformation ni position... https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

De plus, vous n'avez pas à vous soucier de 0.2 进行缩放，只需从 scale(1) 开始，然后通过悬停更大的比例来使其更大，例如 4 au début. (Donc, sans survol, cela ne produira pas cette erreur au début de la transition de 200px à 0,2scale)

Mais si vous voulez que votre CSS fonctionne dans IE et les navigateurs plus anciens, alors il est préférable d'utiliser position, pan, top, left...

Mais vos utilisateurs utilisent des navigateurs modernes, donc pour une meilleure lisibilité et simplicité, il pourrait être judicieux d'utiliser Flexbox ou Grid.

Pour plus d'informations, utilisez https://caniuse.com (par exemple, prise en charge à 95 % de Grid dans n'importe quel navigateur à partir de 2020, Chrome à partir de 2017)

Voici la solution de grille CSS

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  margin: 0;
}

.zoom {
  background-color: green;
  width: 50px;
  height: 50px;
  transition: transform 0.2s;
}

.zoom:hover {
  transform: scale(4);
}

N'oubliez pas que l'ordre des transformations détermine la manière dont les éléments sont affichés. Vous commencez par déplacer 50% de l'élément top: 50%; left: 50%;，将其置于右下象限。然后你把它变小 transform:scale(0.2) 然后然后你把它向左移动现在较小尺寸 translate(-50%, -50%).

En mettant la traduction en premier, l'élément sera centré avant que ne devienne plus petit. N'oubliez pas d'inclure également translate(-50%, -50%) lorsque vous augmentez la taille, car les traductions ultérieures écraseront la traduction actuelle plutôt que d'y ajouter des éléments.

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
position: relative }

.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  
  transform: translate(-50%, -50%) scale(.2);
  position: absolute;
      top: 50%;
    left: 50%;
}

.zoom:hover {
  -ms-transform: translate(-50%, -50%) scale(1.5); /* IE 9 */
  -webkit-transform: translate(-50%, -50%) scale(1.5); /* Safari 3-8 */
  transform: translate(-50%, -50%) scale(1.5); 
}