基于中心移动绝对位置元素 [英] Moving An Absolute Position Element Based Off Of Its Center

问题描述

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

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

  //下面是代码
  

了解更多详情

How would one move an absolute position element through CSS ideally by its center instead of its top left corner?

I currently have a circular element that I am adjusting via absolute positioning. I would like to move it based off of the center of the circle so that I can align it with a line on the background. The size of the circle is dynamic, and so is the background. Trying to get the red circle aligned to where the indigo meets the grey.

//Heres the code

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

解决方案

I think this is what you are trying to do is to use CSS transforms property with the value translate.

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

The value -50% controls X-axis, and 50% is for the Y-axis

PS: play around the values to get what you want

check this link for more details

这篇关于基于中心移动绝对位置元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！