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

104

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

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

<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), холст не останется в середине экрана, как то, как он действует в

<div align="center">

Кто-нибудь может помочь, пожалуйста?

ПолЛинг
источник

Ответы:

224

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

position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
Андрей
источник
Разве вам также не нужно задавать ширину элемента?
Габриэль Флорит
1
Не думаю, что в данном случае это необходимо.
Эндрю
Просто попробовал, и он работает, он должен быть отмечен как правильный ответ
R Reveley
Вы можете использовать изменение левого или правого значения, чтобы переместить объект из центра, фиксированный. Использование left: 80px;переместит объект на 40 пикселей (!) Вправо от центра.
СПРБРН
5
Примечание. Работает, только если стилизованный элемент имеет заданную ширину. (либо px, либо%)
Джонни Вонг
95

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

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>

Винисиус Сантана
источник
16

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

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

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

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

Делетеман
источник
Я пробовал это, но холст «начинается» с середины, а не «помещается» в середину экрана. Есть ли способ установить left: 50% и снова переместить холст влево?
PaulLing
2
@PaulLingmargin-left: <negative half the width>
Chetan S
Что сказал Четан ... опередите меня: P Я отредактирую свой ответ для будущих поколений ...
Deleteman
Ширина экрана различается, когда iPad находится в другой ориентации,
PaulLing
Он имел в виду половину ширины вашего элемента холста ..., что сделало бы его margin-left: -50px;
Deleteman
14
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
Михай Чобану
источник
10

попробуйте этот метод, отлично работает для меня

position: absolute;
left: 50%;
transform: translateX(-50%); 
subindas pm
источник
7

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

убедитесь, что у вашего родительского 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/
СТАЛИ
источник
2
Единственное решение, которое работает для меня. Родитель настроен на гибкость, гибкость-рост и переполнение. Дочерний элемент был размещен вне кадра для изображений большего размера, чем родительский. Кажется, он не знал о ширине родителя. Теперь это исправлено. Большое спасибо!
Кай
0

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

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

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

position: relative;
left: -100px;
Спенсер
источник