絶対配置された要素を中央に揃える方法は？

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で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;

この方法を試して、私にとってはうまくいきます

position: absolute;
left: 50%;
transform: translateX(-50%); 

あなたがしなければならないのは、

親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;