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

【问题标题】：Moving An Absolute Position Element Based Off Of Its Center基于其中心移动绝对位置元素
【发布时间】：2018-08-15 01:06:12
【问题描述】：

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

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

//Heres the code

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

【问题讨论】：

请解释更多:)
我目前有一个圆形元素，我正在通过绝对定位进行调整。我想将它从圆的中心移开，以便我可以将它与背景上的一条线对齐。圆圈的大小是动态的，背景也是如此。希望这会有所帮助。
你可以编辑你对你的问题的解释，也许图片对它有一些帮助
请包含您用来呈现您已经完成的内容的代码。
你有固定的圆圈大小吗？不就是top+width/2还是left+height/2？

标签： html css

【解决方案1】：

我认为这就是你想要做的就是使用 CSS transforms 属性和值 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了解更多详情

【讨论】：