Margin-Top < 0 会导致缩放错误

Question

我想要一个可缩放且居中的子元素。如果将子项的缩放比例更改为 200%，您可以看到元素的顶部是紫色的，但无法放大。我怎样才能解决这个问题？我认为这是因为 margin-top 低于零。

缩放 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

因为#child的高度是以像素为单位的，缩放功能会放大像素数。如果您使用 height: ..%，身高百分比将根据您的 zoom.

缩放

Answer 2

通过向父级添加 '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>

Margin-Top < 0 会导致缩放错误

Margin-Top < 0 leads to wrong zooming

html

css

margin

overflow

zooming