絶対配置された要素を中央に揃えるにはどうすればいいですか? 質問する

絶対配置された要素を中央に揃えるにはどうすればいいですか? 質問する

2枚のキャンバスを重ねて2層キャンバスにしようとしています。

ここで例を見ました:

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

しかし、両方のキャンバスを画面の中央に揃えたいのです。 の値をleft定数に設定すると、画面の向きを変えても(iPadでアプリをやっているように)、キャンバスは画面の中央に留まりません。

<div align="center">

誰か助けてくれませんか?

ベストアンサー1

左と右の両方をゼロに設定し、左と右の余白を自動に設定すると、絶対位置に配置された要素を中央に配置できます。

position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;

おすすめ記事