Ich versuche, dieses Element auf dem Bildschirm zu zentrieren, auch wenn ich den Mauszeiger bewege.
Im Beispiel unten ist das Div nicht zentriert, selbst wenn ich den Mauszeiger darüber bewege, da ich weiß, dass ich eine 50 %-Transformation habe und oben/links ebenfalls transformiert ist. Dies ist es, was ich normalerweise verwende, um das Element zu zentrieren.
* {
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>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
该错误位于
: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); }