将位置绝对div与中间对齐？

Question

我有一个父div和一个子div.儿童div拥有该position: absolute物业.它已经居中,但我想将它与父div的中间对齐.我该怎么做呢？这是我的jsFiddle

HTML

<div id='parent'>
  <div id='child'>

  </div>
</div>

CSS

#parent {
  position: relative;
  width: 500px;
  height: 300px;
  background-color: red;
}

#child {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: blue;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 50%;
}

Answer 1

解决方案是transform: translate(-50%, -50%)在子div上使用,如下所示:

#child {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: blue;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/jwoy7rxr/

这是有效的,因为变换基于来自其自身原点的百分比来定位项目.