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>
しかし、私は両方のキャンバスを画面の中央に揃えたいと思います。 「左」の値を定数として設定すると、画面の向きを変更している間(iPadでapsを実行しているときに)、キャンバスは画面の中央に残りません。
<div align="center">
誰も助けてくれますか?
左右の両方をゼロに設定し、左右のマージンを自動に設定すると、絶対位置の要素を中央に配置できます。
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
要素の幅と高さを知らずに要素を中央揃えにしたい場合:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
例:
*{
margin:0;
padding:0;
}
section{
background:red;
height: 100vh;
width: 100vw;
}
div{
width: 80vw;
height: 80vh;
background: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<section>
<div>
<h1>Popup</h1>
</div>
</section>
使用してみましたか?:
left:50%;
top:50%;
margin-left:-[half the width] /* As pointed out on the comments by Chetan Sastry */
うまくいくかどうかはわかりませんが、試してみる価値はあります...
マイナー編集:Chetanのコメントで指摘されているように、左マージン部分を追加しました...
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
あなたがしなければならないのは、
親DIVにposition:relativeがあることを確認してください
中央に配置する要素は、高さと幅を設定します。次のCSSを使用します
.layer {
width: 600px; height: 500px;
display: block;
position:absolute;
top:0;
left: 0;
right:0;
bottom: 0;
margin:auto;
}
http://jsbin.com/aXEZUgEJ/1/
で親divを中央に移動します
left: 50%;
top: 50%;
margin-left: -50px;
で2番目のレイヤーを他のレイヤーの上に移動します
position: relative;
left: -100px;