title: CSS transition width and height from center of div
body: <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>