CSS transition width and height from center of div

Question

I have elements with position: absolute; that I want to transition in certain situations. However, the origin of the width and height transition seems to depend on the top/bottom left/right values.

Is there any way to have more control over this?

I am specifically looking to transition from the center of the div.

Is there any solution that doesn't rely on transitioning also the top/bottom left/right values?

---

Edit:

I want to keep the width and height transitioning.

Thank you for the answers but using Transform scale is not a solution in this case. Percentages in the Transform property refer to the size of the element's border box, not the container. See for example this JSFiddle, how the end result of hovering over the two elements is different.

---

JSFiddle

div, span {
  width:30%;
  height:30%;
  background:pink;
  transition:all 1s ease;
  position:absolute;
}
*:hover{
  width:10%;
  height:10%;
}
div{
  top:10%;
  left:10%;
}
span{
  bottom:10%;
  right:10%;
}

<div></div>
<span></span>

Answer 1

Well, you can always use transform - scale for that matter:

div {
  background:pink;
  width:200px;
  height:200px;
  transition:all 1s ease;
}
div:hover{
        -webkit-transform: scale(0.1);
        -ms-transform: scale(0.1);
        transform: scale(0.1);
}

<div></div>