javascript - 以绝对位置居中图像(顶部，左侧)

Question

我正在使用参数方程围绕一个圆定位图像 ( How do I calculate a point on a circle’s circumference? )

我使用简单的数学方法以更少的方式完成此操作:

// x,y position on circumference:
// x = a + r * cos(t)
// y = b + r * sin(t)

.position {
left: @a + ( @r *  cos(@t) );
top: @b + ( @r *  sin(@t) );
}

我遇到的问题是，这将图像定位在左上角，而不是图像的中心，因此没有考虑它具有的高度和宽度的视觉偏移。尝试调整 height/2，width/2 不起作用，因为每个图像的 Angular 不同。

有没有一种简单的方法可以以这种方式定位图像，使其以 x,y 为中心？

Answer 1

.position {
    left: @a + ( @r *  cos(@t) );
    top: @b + ( @r *  sin(@t) );

    margin-left: -@r;
    margin-top: -@r;
}

虽然您可以这样做而不是计算:

top:50%;
left:50%; 
position:absolute; 

margin-left:-@r;
margin-top:-@r;

FIDDLE DEMO