使缩放元素居中超出窗口宽度和高度

Question

我有一个div #content-wrapper，里面嵌套的是一个div #canvas-blur和一个main元素。所有元素应该与视口/窗口的宽度和高度相同，但＃canvas-blur具有CSS transform: scale(1.1);使其更大。在#canvas-blur div中有一个canvas元素设置为视口/窗口的大小，在这个画布上我创建了一个跟踪鼠标位置的绘画工具。问题是#canvas-blur从左上角缩放（见附录1），这会影响画布上的鼠标位置（见图片）。我需要#canvas-blur从中心扩展（见附录2）。这意味着main和#canvas-blur将具有相同的中心点，并将如附录3中所示滚动在一起。任何指向正确方向的指针都将非常有用。

编辑：已添加JSFiddle

#content-wrapper {
  height: 100vh;
  width: 100vw;
}

#canvas-blur {
  z-index: -1;
  position: relative;
  transform: scale(1.1);
}

main {
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
  display: flex;
}

<div id="content-wrapper">
  <main>

  </main>
  <div id="canvas-blur">
    <canvas>
        </div>
    </div>

MOUSE

Answer 1

听起来像变换起源可能就是你所需要的。

尝试将此添加到＃canvas-blur

transform-origin: center;

您也可以尝试将此添加到main以使内容在水平和垂直方向上居中，因为您使用的是flex：

align-items: center;
justify-content: center;