<style>
#test{
width: 100px;
height: 100px;
background-color: red;
transition: all 1s;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
/*transform:translate(-50%,-50%);*/
transform-origin: 50% 50%;
}
#test:hover{
transform: scale(1.2, 1.2);
}
</style>
</head>
<body>
<p id="test"></p>
</body>Wenn ich eine negative Methode für den linken Rand verwende, um die Mitte auszurichten, und dann hineinzoome, wenn die Maus schwebt, ist der Mittelpunkt die obere und untere Mitte, die durch transform-origin festgelegt wurde, und es gibt kein Problem: 
Aber wenn ich transform:translate(-50%,-50%) für die zentrierte Ausrichtung verwende:
<style>
#test{
width: 100px;
height: 100px;
background-color: red;
transition: all 1s;
position: absolute;
left: 50%;
top: 50%;
/*margin-left: -50px;*/
transform:translate(-50%,-50%);
transform-origin: 50% 50%;
}
#test:hover{
transform: scale(1.2, 1.2);
}
</style>
</head>
<body>
<p id="test"></p>
</body>
Wenn die Maus nach oben schwebt, scheint der Mittelpunkt der Vergrößerung in die obere linke Ecke zu gehen. Auch wenn ich transform-orgin einstelle, funktioniert es immer noch nicht, 
Von der Konsole aus funktioniert das transform-origin-Attribut. Ich bin sehr verwirrt darüber, warum das passiert. Bitte geben Sie mir einen Rat
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
很明显的错误，
hover的时候把原有的translate覆盖掉了正确写法如下