另一个中心元素,而父元素指定position:absolute？

Question

我正在使用这个JS小提琴:http://jsfiddle.net/BY3tz/1/

注意当您删除position,left和top从属性dotParentCSS类,黑点是在盒子的中心.

我正在寻找一种方法来保持黑点居中(垂直和水平),同时保留上面提到的3个属性,以便我可以更改left和top属性以将框定位在任何位置,并且黑点将保持居中.

这可能吗？谁能看到我dot班上的错误？

Answer 1

对.dot课程的一些调整:

.dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    margin-left: -5px; // Half of the width * (-1)
    margin-top: -5px; // Half of the height * (-1)
    top: 50%;
    left: 50%;
    background: #000;
    -webkit-border-radius: 50px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

http://jsfiddle.net/BY3tz/2/