CSS transition width and height from center of div
<p>I have elements with <strong>position: absolute;</strong> 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.</p>

<p><strong>Is there any way to have more control over this?</strong></p>

<p>I am specifically looking to transition from the center of the div.</p>

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

<hr>

<p><strong>Edit</strong>:</p>

<p>I want to keep the width and height transitioning.</p>

<p>Thank you for the answers but using <strong>Transform scale is not a solution</strong> in this case. Percentages in the <a href="https://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/" rel="noreferrer">Transform property</a> refer to the size of the element's border box, not the container. See for example <a href="https://jsfiddle.net/6gyp3f7k/" rel="noreferrer">this JSFiddle</a>, how the end result of hovering over the two elements is different.</p>

<hr>

<p><a href="https://jsfiddle.net/36hhyvkg/" rel="noreferrer">JSFiddle</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;
&lt;span&gt;&lt;/span&gt;</code></pre>
</div>
</div>
</p>