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

Program / 글쓴이

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

여기에 예제가 있습니다.

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

답변

이 방법을 시도해보십시오.

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

답변

당신이해야 할 일은

부모 DIV가 position : relative를 가지고 있는지 확인하십시오.

가운데 원하는 요소를 높이와 너비로 설정합니다. 다음 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/

답변

부모 div를 중간으로 이동하십시오.

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

두 번째 레이어를 다른 레이어 위로 이동하십시오.

position: relative;
left: -100px;