我试图用JQuery放大图像，效果很好（动画本身）但是锚点位于左上角。如何使锚点居中？我已经尝试使用left:50%; transform: translateX(-50%);了。代码如下：
HTML：
<div id="main-links">
<a style="cursor:pointer"><img id="img-1" style="margin-left: 0;" src="img/icons/forums.png" /></a>
<a style="cursor:pointer"><img id="img-2" src="img/icons/servers.png" /></a>
<a style="cursor:pointer"><img id="img-3" src="img/icons/staff.png" /></a>
<a style="cursor:pointer"><img id="img-4" src="img/icons/donate.png" /></a>
</div>
CSS：
#main-links {
position: absolute;
width: 873px;
height: 205px;
left: 50%;
transform: translateX(-50%);
margin-top: -90px;
}
#main-links img {
width: 0;
height: 0x;
margin-left: 20px;
}
JavaScript / JQuery：
$(document).ready(function() {
$('#img-1').delay(700).animate({ height: 200, width: 200 }, 500)
$('#img-2').delay(1200).animate({ height: 200, width: 200 }, 500)
$('#img-3').delay(1700).animate({ height: 200, width: 200 }, 500)
$('#img-4').delay(2200).animate({ height: 200, width: 200 }, 500)
})