jquery - 如何根据元素的中心绝对定位元素

Question

如何理想地通过 CSS 移动绝对位置元素的中心而不是左上角？

我目前有一个圆形元素，我正在通过绝对定位进行调整。我想根据圆心移动它，以便我可以将它与背景上的一条线对齐。圆圈的大小是动态的，背景也是如此。尝试使红色圆圈与靛蓝与灰色相交的位置对齐。

//Heres the code

https://jsfiddle.net/4akwe208/4/

这是它的图片: /image/912k6.png

Answer 1

使用值为 translate 的 CSS transforms 属性。

#your-div-name {
    -ms-transform: translate(-50%, 50%); /* IE 9 */
    -webkit-transform: translate(-50%, 50%); /* Safari */
    transform: translate(-50%, 50%);
}

第一个值-50%控制X轴，50%为Y轴

PS: *玩转值(value)观以获得你想要的。 px 或 % 值都有效