7

我正在使用以下代码将画布居中：

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 中支持画布居中？

4

1 回答 1

7

在几乎所有浏览器中使用margin: 0 auto;with居中- 那些肯定支持的浏览器。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和leftto将画布从顶部和左侧偏移 50% 50%。然后，因为您的画布具有静态大小，我们为宽度和大小的一半（550x400/2 = 275x200）添加负边距（当元素不是绝对定位时，您永远不应该这样做）margin-left: -275px; margin-top: -200px;：。

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

现场示例：http: //jsbin.com/ovoziv/6

于 2013-05-27T11:18:29.833 回答