我试图将此元素置于屏幕中心，当我悬停时也是如此。
在下面的示例中，div 没有居中，即使当我将其悬停时，知道我也进行了 50% 变换，并且顶部/左侧也进行了变换，这就是我用来使元素居中的常用方法。
2
854* {
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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
该错误位于
: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); }请记住，变换的顺序决定了元素的显示方式。您首先移动元素
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); }