Margin-Top <0 приводит к неправильному увеличению

Question

Я хочу, чтобы дочерний элемент был масштабируемым и центрированным. Если вы измените масштаб дочернего элемента на 200%, вы увидите, что верх элемента фиолетовый, но вы не можете увеличить его. Как я могу это исправить? Я думаю, это потому, что вершина маржи ниже нуля.

Увеличение 100%:

#child {
  background-image: linear-gradient(red, violet, yellow, green, pink);
  width:50px;
  height:400px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    zoom: 100%;
}

#parent {
  background-color:blue;
  width:500px;
  height:500px;
  position: relative;
  transform: scale();
  overflow: auto;
}

<div id="parent">
  <div id="child"></div>
</div>

Увеличение 200%:

#child {
  background-image: linear-gradient(red, violet, yellow, green, pink);
  width:50px;
  height:400px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    zoom: 200%;
}

#parent {
  background-color:blue;
  width:500px;
  height:500px;
  position: relative;
  transform: scale();
  overflow: auto;
}

<div id="parent">
  <div id="child"></div>
</div>

Answer 1

Решил это, добавив 'display: flex; align-items: center;' к родителю и удалив абсолютную позицию (включая позиции)

#child {
  background-image: linear-gradient(red, violet, yellow, green, pink);
  width: 50px;
  height: 400px;
  margin: auto;
  zoom: 200%;
}

#parent {
  background-color:blue;
  width: 500px;
  height: 500px;
  overflow: auto;
  display: flex;
  align-items: center;
}

<div id="parent">
  <div id="child"></div>
</div>

Answer 2

Поскольку высота #child указана в пикселях, функция масштабирования будет увеличивать количество пикселей. Если вы используете height: ..% процент высоты будет масштабироваться на вашем zoom.