我正在使用以下代码将画布居中:
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中居中canvas?
我正在使用以下代码将画布居中:
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中居中canvas?
margin: 0 auto;
和display: block;
进行居中在几乎所有浏览器中都可以运行,对于支持<canvas>
的浏览器肯定可以运行。<!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
将画布与顶部和左侧的偏移量都设置为50%,通过设置top
和left
为50%
。然后,因为您的画布具有静态大小,我们为宽度和大小的一半(550x400/2 = 275x200)添加了负边距(当元素没有绝对定位时,永远不要这样做):margin-left: -275px; margin-top: -200px;
。position: relative;
添加到该元素中,以便它使用其边界而不是body的边界。