recherche

Maison  >  Questions et réponses  >  le corps du texte

Pourquoi le div n'est-il pas centré ?

J'essaie de centrer cet élément sur l'écran, également lorsque je survole.

Dans l'exemple ci-dessous, le div n'est pas centré, même lorsque je le survole, sachant que j'ai une transformation à 50% et que le haut/gauche est également transformé, c'est ce que j'utilise habituellement pour centrer l'élément . 

* {
  box-sizing: border-box;
}
body {
position: relative }

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

.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 
</head>
<body>
 
<div class="zoom"></div>

</body>
</html>

P粉805922437P粉805922437357 Il y a quelques jours443

répondre à tous(2)je répondrai

  • P粉211600174

    P粉2116001742024-02-05 07:00:08

    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);
}

    répondre
    0
  • P粉797855790

    P粉7978557902024-02-05 00:44:14

    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); 
}

    répondre
    0
  • Annulerrépondre