Question

我使用此代码将我的画布置于中心位置：

position:absolute;
top:50%;
left:50%;
margin-top:-200px; /* Half of canvas height */
margin-left:-275px; /* Half of canvas width */

除了IE9和10之外，它在所有浏览器中都很完美。在Internet Explorer中，它涵盖了整个页面。是否有可能支持IE中的画布居中？

Answer 1

使用margin: 0 auto;与display: block;进行对中几乎适用于所有浏览器 - 确保支持<canvas>。

实例：http://jsbin.com/ovoziv/2

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Centring Canvas</title>
</head>
<body>

  <canvas></canvas>

</body>
</html>

CSS

canvas {
  display: block;
  background: #FFFFB7;
  width: 550px;
  height: 400px;
  margin: 0 auto;
}

编辑：更新了垂直居中的答案。这个CSS可以解决这个问题：

canvas {
    background-color: #FFFFB7;
    width: 550px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -275px;
    margin-top: -200px;
}

现在解释。我们首先通过将position: absolute和top设置为left，使用50%将画布与顶部和左侧偏移50％。然后，因为你的画布有一个静态大小，我们为宽度和大小的一半（550x400 / 2 = 275x200）添加一个负边距（当元素不是绝对定位时你不应该这样做）：margin-left: -275px; margin-top: -200px;。

画布现在将显示在屏幕的中央。如果你在另一个元素中执行此操作并希望以该元素为中心，请尝试将position: relative;添加到该元素，因此它将使用它的边界而不是正文。

此处的实例：http://jsbin.com/ovoziv/6

Canvas覆盖Internet Explorer中的页面

1 个答案: