【CSS】中央寄せが上手く出来ません

以下は、とある入門書のゲーム画面です。これをそっくりそのまま中央寄せしたいのですが、上手く出来ませんでした。
h1タグやスコアの部分だけならdivとwidthとmarginで出来ましたが、canvasの位置関係を崩さずに寄せる方法が思いつかなかったです。
よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <title>質問用</title>
6  </head>
7  <body>
8    <h1>落ち物パズル</h1>
9      スコア：<span id="tokuten">0</span>
10      <canvas id="back" width="240" height="440"
11          style="position:absolute; left:20px; top:150px; background-color:black">
12      </canvas>
13      <canvas id="game" width="240" height="440"
14          style="position:absolute; left:20px; top:150px; background-color:transparent">
15      </canvas>
16      <canvas id="tsugi" width="80" height="80"
17          style="position:absolute; left:300px; top:150px; background-color:black">
18      </canvas>
19      <button id="kaishibtn"
20          style="position:absolute; left:300px; top:300px; width:80px; height:50px">
21          ゲーム<br>スタート
22      </button>
23  </body>
24</html>

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず適当にラップして幅を決めればあとはmarginの設定

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>質問用</title>
6<style>
7.wrap{
8position:relative;
9width:400px;
10margin:auto;
11}
12</style>
13</head>
14<body>
15<div class="wrap">
16<h1>落ち物パズル</h1>
17スコア：<span id="tokuten">0</span>
18<canvas id="back" width="240" height="440"
19style="position:absolute; left:20px; top:150px; background-color:black">
20</canvas>
21<canvas id="game" width="240" height="440"
22style="position:absolute; left:20px; top:150px; background-color:transparent">
23</canvas>
24<canvas id="tsugi" width="80" height="80"
25style="position:absolute; left:300px; top:150px; background-color:black">
26</canvas>
27<button id="kaishibtn"
28style="position:absolute; left:300px; top:300px; width:80px; height:50px">
29ゲーム<br>スタート
30</button>
31</div>
32</body>
33</html>