如何用css真正对齐两个元素的中心？

Question

我有一个带有圆形图像的画布，它放在一个包装器里面，如下所示：

<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

像这样的东西是将图像的左上角放在页面的中央：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
}

为了使图像准确居中，您需要应用图像高度的一半的负上边距和图像宽度的一半的负左边距。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -???px;
  margin-left: -???px;
}

Answer 2

你需要使用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),
    });