基于中心移动绝对位置元素

Question

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

我目前有一个圆形元素，我通过绝对定位进行调整。我想基于圆的中心移动它，以便我可以将它与背景上的线对齐。圆的大小是动态的，背景也是如此。试图让红色圆圈与靛蓝与灰色相遇的位置对齐。

//Heres the code

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

Answer 1

我认为您要尝试的是使用值为transforms的CSS translate属性。

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

值-50%控制X轴，50%用于Y轴

PS： 围绕这些值进行游戏以获得您想要的内容

查看此link了解详情