Make element expand from its center

Question

The problem is, I have a div centralized with that container trick (Trick) in position: absolute or fixed and the div internal in relative.

As you can see, when the animation is executed, div internal (#square) grows from top to bottom. I wish it would grow from its center and expand everywhere, but it stays at the same distance from the top, because of the top: -30%. What can I do to make it, in animation, it expands everywhere, rather than up down?

// Função simples para animar a div com css transitions
var square = document.querySelector('#square');

setTimeout(function(){
      square.style.width = '100px';
      square.style.height = '100px';
}, 500);

#container {
      position: fixed;
      left: 50%;
      top: 50%;
}

#square {
      position: relative;
      left: -50%;
      top: -30%;
      width: 20px;
      height: 20px;
      background: blue;
      transition: all 1s ease-in-out;
}

<div id="container" >
    <div id="square" > </div>
</div>

Answer 1

A simple solution is to use the scale instead of modifying width and height:

// Função simples para animar a div com css transitions
var square = document.querySelector('#square');

setTimeout(function(){
      square.style.transform = "scale(5)"; //scale em vez de width e height
      //scale(5) dá 5 vezes o tamanho, logo 100 por 100.
}, 500);

#container {
      position: fixed;
      left: 50%;
      top: 50%;
}

#square {
      position: relative;
      left: -50%;
      top: -30%;
      width: 20px;
      height: 20px;
      background: blue;
      transition: all 1s ease-in-out;
      /*transform: scale(1); coloquei aqui para tornar claro que é o valor inicial, embora não seja necessário*/
}

<div id="container" >
    <div id="square" > </div>
</div>

To embed an image in the div it will be better to make the transformation go from a value less than 0 to 1, not to distort. And define the real dimension of the image in width and height.

Imaging solution:

// Função simples para animar a div com css transitions
var square = document.querySelector('#square');

setTimeout(function() {
    square.style.transform = "scale(1)"; //agora com 1 para ficar no tamanho real
}, 500);

#container {
            position: fixed;
            left: 50%;
            top: 10%; /*passou a 10% aqui*/
        }
        
        #square {
            position: relative;
            left: -50%;
            top: 0;
            width: 200px;
            height: 200px;
            transition: all 1s ease-in-out;
            background: url(https://upload.wikimedia.org/wikipedia/commons/6/6a/Culmination200.jpg);
            transform:scale(0.1); /*tamanho começa mais pequeno para não distorcer*/
        }

<div id="container">
    <div id="square"> </div>
</div>