为什么div不居中

Question

我试图将此元素置于屏幕中心，当我悬停时也是如此。在下面的示例中，div没有居中，即使当我将其悬停时，知道我也进行了50%变换，并且顶部/左侧也进行了变换，这就是我用来使元素居中的常用方法。*{box-sizing:border-box;}body{position:relative}.zoom{padding:50px;background-color:green;transition:trans

P粉211600174 · Answer

该错误位于 :hover 选择器中，因为转换中没有 translate() ，您基本上将其重置为 0，这不是您想要的。因为它会忘记之前的内容并覆盖它。

这里有一个简单的解决方案：

❌

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

✅

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

这里有一个简单的解释：

现代解决方案（更少的代码）：

使用 CSS 网格 https://developer.mozilla.org/ en-US/docs/Web/CSS/grid

使用 place-items 它将自动居中，无需任何转换或位置... https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

此外，您不必在开始时对 0.2 进行缩放，只需从 scale(1) 开始，然后通过悬停更大的比例来使其更大，例如 4 。（因此，在没有任何悬停的情况下，它不会在从 200px 到 0.2scale 过渡开始时产生该错误）

但是，如果您想让 CSS 在 IE 和旧版浏览器中也能工作，那么最好使用位置、平移、顶部、左侧...

但是您的用户使用的是现代浏览器，因此为了提高可读性并更简单地使用 Flexbox 或网格可能是一个好主意。

如需了解更多信息，请使用 https://caniuse.com （例如，任何浏览器 95% 都支持网格从 2020 年开始，Chrome 从 2017 年开始）

这里是 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);
}

P粉797855790 · Answer

请记住，变换的顺序决定了元素的显示方式。您首先移动元素 top: 50%; left: 50%;，将其置于右下象限。然后你把它变小 transform:scale(0.2) 然后然后你把它向左移动现在较小尺寸 translate(-50%, -50%) 的 50%。

通过将翻译放在第一位，元素会在变小之前居中。请记住，当您增加大小时，还要包含 translate(-50%, -50%)，因为后续的翻译将覆盖当前的翻译，而不是添加到其中。

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