Comment aligner l'élément absolument positionné au centre?

J'essaie d'empiler deux toiles ensemble et d'en faire une toile à double couche.

J'ai vu un exemple ici:

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

Mais je voudrais aligner les deux toiles au centre de l'écran. Si je règle la valeur de leftcomme constante, pendant que je change l'orientation de l'écran (comme je le fais sur iPad), la toile ne restera pas au milieu de l'écran comme elle agit dans

<div align="center">

Quelqu'un peut-il aider s'il vous plaît?

Si vous définissez à la fois gauche et droite sur zéro et les marges gauche et droite sur auto, vous pouvez centrer un élément positionné de manière absolue.

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

Si vous souhaitez centrer un élément sans connaître sa largeur et sa hauteur, procédez comme suit:

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

Exemple:

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

Avez-vous essayé d'utiliser?:

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

Je ne sais pas si cela fonctionnera, mais cela vaut la peine d'essayer ...

Modification mineure : Ajout de la partie marge gauche, comme indiqué sur les commentaires de Chetan ...

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

essayez cette méthode, fonctionne bien pour moi

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

Tout ce que tu dois faire est,

assurez-vous que votre DIV parent a la position: relative

et l'élément que vous voulez centrer, définissez-lui une hauteur et une largeur. utilisez le CSS suivant

.layer {
    width: 600px; height: 500px;
    display: block;
    position:absolute;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
    margin:auto;
  }
http://jsbin.com/aXEZUgEJ/1/

Déplacez le div parent vers le milieu avec

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

Déplacez le deuxième calque sur l'autre avec

position: relative;
left: -100px;