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

由于#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导致错误的缩放

2 个答案: