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

ProgramBox

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

Post author:admin
Запись опубликована:8 февраля, 2023
Post category:Вопросы по программированию

#css #html5-canvas

#css #html5-холст

Вопрос:

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

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

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

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

Ответ №1:

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

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

1. Разве вам также не нужно придать элементу ширину?

2. Я не думаю, что в данном случае в этом есть необходимость.

3. Просто попробовал это, и это работает, это должно быть отмечено как правильный ответ

4. Вы можете использовать изменение значений влево или вправо, чтобы переместить объект из центра, исправлено. Использование left: 80px; переместит объект на 40 пикселей (!) вправо от центра.

5. Примечание: работает только в том случае, если стилизованный элемент имеет заданную ширину. (либо px, либо %)

Ответ №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>

1. Это хороший трюк, но в вашем подходе есть небольшая оговорка. Если ширина элемента не задана, но в нем встроенное содержимое шире, чем 50% от ширины родительского элемента, то дополнительные 50% смещения от left родительского элемента экстраполируют ширину родительского элемента, перенося содержимое на следующие строки, чтобы избежать переполнения. Но при использовании этого подхода можно сохранить содержимое встроенным, установив в элементе white-space атрибут nowrap . Попробуйте это в этом JSFiddle .

Ответ №3:

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

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

Ответ №4:

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

Ответ №5:

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

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

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

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

1. Я. Я пробовал это, но холст «начинается» с середины, но не «размещается» в середине экрана. Можно ли в любом случае установить left: 50% и снова переместить холст влево?

2. @PaulLing margin-left: <negative half the width>

3. Что сказал Четан.. опередите меня: P Я отредактирую свой ответ для будущих поколений…

4. Ширина экрана отличается, когда iPad находится в другой ориентации

5. Он имел в виду половину ширины вашего элемента canvas …, что сделало бы его margin-left:-50px;

Ответ №6:

Все, что вам нужно сделать, это убедиться, что у вашего родителя <div> есть position:relative , и установить высоту и ширину для элемента, который вы хотите центрировать. Используйте следующий CSS:

 .layer {
    width: 600px; height: 500px;
    display: block;
    position:absolute;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
    margin:auto;
}

https://output.jsbin.com/aXEZUgEJ/1/

1. Единственное решение, которое работает для меня. Родительский элемент имеет значение flex, flex-grow amp; overflow . Дочерний элемент был размещен вне рамки для изображений большего размера, чем родительский. Похоже, он не знал о ширине родительского элемента. Теперь это исправлено. БОЛЬШОЕ спасибо!

Ответ №7:

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

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

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

 position: relative;
left: -100px;