절대 위치를 중앙에 정렬하는 방법은 무엇입니까?

절대 위치를 중앙에 정렬하는 방법은 무엇입니까?

---

두 개의 캔버스를 함께 쌓아 이중 레이어 캔버스로 만들려고합니다.

여기에 예제가 있습니다.

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

누구든지 도와 주시겠습니까?

---

왼쪽과 오른쪽을 모두 0으로 설정하고 왼쪽과 오른쪽 여백을 자동으로 설정하면 절대 위치 요소를 중앙에 배치 할 수 있습니다.

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;

---

All you have to do is,

make sure your parent DIV has position:relative

and the element you want center, set it a height and width. use the following 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/

---

Move the parent div to the middle with

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

Move the second layer over the other with

position: relative;
left: -100px;

참고URL : https://stackoverflow.com/questions/7720730/how-to-align-the-absolute-position-to-center