把span设置的和 .box 一样大就好了，然后取消位置绝对位移就好了，因为都一样大，位置没有偏差的余地，margin也可以取消。

.box span {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  /*position: absolute;*/
  background: #fff;
  /*top: 50%;*/
  /*left:50%;*/
  /*margin: -5px 0  0 -5px;*/
  z-index:1;
}

你把任务中span的css改成这样：

.box span { 

   display: block;

  width: 30px;

  height: 30px;

  border-radius: 100%;

  background: red;

  position: absolute;

  top: 50%;

  left:50%;

  margin: -15px 0  0 -15px;

  z-index:1;

}