canvas画布⽔平居中
canvas 画布⽔平居中
⽅式⼀：利⽤display 属性，在style 样式中设置display的值为block，然后设置margin:0 auto；即可实现⽔平局中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
canvas{
display: block;
margin: 0 auto;
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>
效果如下图所⽰：
canvas画布⽔平居中
⽅式⼆：在canvas外⾯包裹⼀个盒⼦div ，在style样式设置盒⼦的宽度与canvas的宽度相等，盒⼦margin：0 auto；⽔平居中，既可以实现canvas画布的⽔平居中，代码如下，效果图略。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
margin:0 auto;
width:400px;
}
canvas{
/*display: block;
margin: 0 auto;*/
border:1px solid red;
}
</style>
</head>
<body>
<div>
div中的div居中<canvas id="canvas" width="400px" height="400px"></canvas>  </div>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。