Question

我想居中div，然后将其缩放（通过transorm：scale）使其更大。

我使用flexbox将div居中。我想使用整个视图空间，所以给HTML和BODY元素一个100％的高度。

在Firefox中，它可以很好地呈现。但是，在Chrome中，内部div的缩放似乎会导致BODY元素溢出，并出现垂直滚动条。

如果您在Chrome和Firefox中运行以下代码段，则会注意到其中的区别：垂直滚动条仅在Chrome中显示。我想让它在Chrome中看起来就像在Firefox中一样（没有滚动条）。

有人可以帮我解决这个问题吗？

html {
  height: 100%;	  
  background-color: black;     
}

body {
  height: 100%;
  display: flex;
  overflow: auto;
  margin: 0;
  background-color: antiquewhite;
}

div {
  height: 50px;
  width: 50px;
  margin: auto;
  transform: scale(1.7);
  background-color: blue;
}

<html>
  <body>
    <div>
    </div>
   </body>
 </html>

Answer 1

请考虑使用align-items / justify-content来使元素居中，而不是空白。 Chrome似乎也可以扩大导致此问题的利润：

html {
  height: 100%;
  background-color: black;
}

body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background-color: antiquewhite;
}

div.box {
  height: 50px;
  width: 50px;
  transform: scale(1.7);
  background-color: blue;
}

<div class="box">
</div>

在Flexbox下缩放比例转换在Chrome和Firefox中呈现的方式有所不同

1 个答案: