css - 如何真正将两个元素的中心与 css 对齐？

Question

我有一个 Canvas ，里面有一个圆形图像，它被放置在这样的包装器中:

<div id="kaleidowrapper"><canvas class="kaleidoscope" height="1448" width="1448"></canvas></div>

.kaleidoscope 是圆形图像。圆形图片半径根据浏览器大小设置，使图片能覆盖整个背景。高和宽都是2*radius这样的

包装器具有以下 css:

#kaleidowrapper{
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

默认情况下，我的图像定位如下:

如何定位图像以使其在屏幕上居中？

Answer 1

你需要为此使用 jquery。试试这个 fiddle

JS:

var imgWidth = Math.sqrt(($("div").width()*$("div").width())*2);
$("img").css({
    "width": imgWidth,
    "position":"relative",
    "left":-((imgWidth-$("div").width())/2),
    "top":-((imgWidth-$("div").height())/2),
    });