Как выровнять абсолютное положение с центром?

Я пытаюсь собрать два холста вместе и сделать его двухслойным холстом.

Я видел здесь пример:

<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" в качестве константы, в то время как я меняю ориентацию экрана (как я делаю aps на iPad), холст не останется посередине экрана, как то, как он действует в

<div align="center">

Кто-нибудь может помочь?

Ответ 1

Если вы установите как левое, так и правое на ноль, а левое и правое поля автоматически, вы можете центрировать абсолютно позиционированный элемент.

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

Ответ 2

Если вы хотите центрировать выравнивание элемента, не зная его ширины и высоты, выполните:

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>

Ответ 3

Вы пытались использовать?:

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

Не уверен, что это сработает, но стоит попробовать...

Незначительное редактирование: добавлена левая часть с краем, как указано в комментариях Четана...

Ответ 4

Все, что вам нужно сделать, это

убедитесь, что ваш родительский DIV имеет позицию: 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/

Ответ 5

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

Ответ 6

Переместите родительский div в середину с помощью

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

Переместите второй слой поверх другого с помощью

position: relative;
left: -100px;

Ответ 7

просто используйте: Я ничего не делаю, не знаю почему, но большинство вещей не работает с html5

<html>
<body>

<div style="margin-left:25%">


//

</div>

</body>
</html>