搜索

首页  >  问答  >  正文

为什么div不居中

我试图将此元素置于屏幕中心，当我悬停时也是如此。

在下面的示例中，div 没有居中，即使当我将其悬停时，知道我也进行了 50% 变换，并且顶部/左侧也进行了变换，这就是我用来使元素居中的常用方法。

* {
  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粉805922437343 天前433

全部回复(2)我来回复

  • P粉211600174

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

    该错误位于 :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);
}

    回复
    0
  • P粉797855790

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

    请记住，变换的顺序决定了元素的显示方式。您首先移动元素 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); 
}

    回复
    0
  • 取消回复