Bagaimana cara menyelaraskan elemen yang benar-benar diposisikan ke tengah?

Saya mencoba untuk menumpuk dua kanvas bersama-sama dan menjadikannya kanvas lapisan ganda.

Saya telah melihat contoh di sini:

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

Tapi saya ingin mengatur kedua kanvas sejajar di tengah layar. Jika saya menetapkan nilai leftsebagai konstanta, sementara saya mengubah orientasi layar (seperti yang saya lakukan aps di iPad) kanvas tidak akan tetap berada di tengah layar seperti bagaimana tindakannya di

<div align="center">

Apakah ada yang bisa membantu?

Jika Anda menyetel kiri dan kanan ke nol, dan margin kiri dan kanan ke otomatis, Anda dapat memusatkan elemen yang diposisikan secara absolut.

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

Jika Anda ingin meratakan tengah elemen tanpa mengetahui lebar dan tingginya lakukan:

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

Contoh:

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

Sudahkah Anda mencoba menggunakan ?:

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

Tidak yakin apakah itu akan berhasil, tetapi patut dicoba ...

Pengeditan kecil : Menambahkan bagian kiri margin, seperti yang ditunjukkan pada komentar oleh Chetan ...

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

coba metode ini, bekerja dengan baik untuk saya

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

Yang harus Anda lakukan adalah,

pastikan DIV orang tua Anda memiliki posisi: relatif

dan elemen yang Anda inginkan di tengah, setel tinggi dan lebarnya. gunakan CSS berikut

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

Pindahkan div induk ke tengah dengan

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

Pindahkan lapisan kedua di atas yang lain dengan

position: relative;
left: -100px;