Làm thế nào để căn chỉnh phần tử được định vị tuyệt đối vào trung tâm?

Tôi đang cố gắng chồng hai canvas lại với nhau và biến nó thành canvas hai lớp.

Tôi đã thấy một ví dụ ở đây:

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

Nhưng tôi muốn đặt cả hai căn chỉnh canvas ở giữa màn hình. Nếu tôi đặt giá trị leftlà một hằng số, trong khi tôi thay đổi hướng của màn hình (khi tôi đang thực hiện aps trên iPad), canvas sẽ không ở giữa màn hình như cách nó hoạt động

<div align="center">

Ai có thể giúp tôi không?

Nếu bạn đặt cả lề trái và phải thành 0, và lề trái và phải thành tự động, bạn có thể căn giữa một phần tử được định vị hoàn toàn.

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

Nếu bạn muốn căn giữa một phần tử mà không biết chiều rộng và chiều cao của nó, hãy làm như sau:

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

Thí dụ:

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

Bạn đã thử sử dụng chưa ?:

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

Không chắc liệu nó có hoạt động hay không, nhưng rất đáng để thử ...

Chỉnh sửa nhỏ : Đã thêm phần lề bên trái, như đã chỉ ra trên các nhận xét của Chetan ...

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

hãy thử phương pháp này, làm việc tốt cho tôi

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

Tât cả nhưng điêu bạn phải lam la,

đảm bảo DIV cha mẹ của bạn có vị trí: họ hàng

và phần tử bạn muốn căn giữa, hãy đặt chiều cao và chiều rộng cho nó. sử dụng CSS sau

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

Di chuyển div cha vào giữa với

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

Di chuyển lớp thứ hai lên lớp khác bằng

position: relative;
left: -100px;