Wie kann man das absolut positionierte Element zur Mitte ausrichten?

Ich versuche, zwei Leinwand zusammen zu stapeln und daraus eine Leinwand mit zwei Ebenen zu machen.

Ich habe hier ein Beispiel gesehen:

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

Aber ich möchte beide Leinwand in der Mitte des Bildschirms ausrichten. Wenn ich den Wert leftals Konstante einstelle , während ich die Ausrichtung des Bildschirms ändere (während ich Aps auf dem iPad mache), bleibt die Leinwand nicht in der Mitte des Bildschirms, wie sie sich verhält

<div align="center">

Kann mir bitte jemand helfen?

Wenn Sie sowohl den linken als auch den rechten Rand auf Null und den linken und rechten Rand auf Auto setzen, können Sie ein absolut positioniertes Element zentrieren.

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

Wenn Sie ein Element zentrieren möchten, ohne dessen Breite und Höhe zu kennen, gehen Sie wie folgt vor:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Beispiel:

*{
  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>

Haben Sie versucht, zu verwenden?:

left:50%;
top:50%;
margin-left:-[half the width] /* As pointed out on the comments by Chetan Sastry */

Ich bin mir nicht sicher, ob es funktionieren wird, aber es ist einen Versuch wert ...

Kleinere Änderungen : Der Teil am linken Rand wurde hinzugefügt, wie in den Kommentaren von Chetan ...

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

Probieren Sie diese Methode aus und funktionieren Sie gut für mich

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

Alles was du tun musst, ist,

Stellen Sie sicher, dass Ihr Eltern-DIV die Position: relativ hat

und das Element, das Sie zentrieren möchten, legen Sie eine Höhe und Breite fest. Verwenden Sie das folgende 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/

Verschieben Sie das übergeordnete Div mit in die Mitte

left: 50%;
top: 50%;
margin-left: -50px;

Bewegen Sie die zweite Ebene mit über die andere

position: relative;
left: -100px;