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

Я пытаюсь собрать два холста вместе и сделать его двухслойным холстом.Как выровнять абсолютное положение по центру?

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

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

Может ли кто-нибудь помочь?

источник

2011-10-11 PaulLing

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

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

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

Minor редактировать: Добавлен запас левой части, а указал на комментарии по Chetan ...

источник

2011-10-11 02:17:04 Deleteman

Ya I попробовали это, но холст «начал» с середины, но не «помещался» в середину экрана. В любом случае, нужно установитьлево: 50% и снова переместить холст влево? – PaulLing

@PaulLing 'margin-left: <отрицательная половина ширины>' –

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

Переместите родительский DIV к середине с

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

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

position: relative; 
left: -100px;

источник

2011-10-11 02:39:14 Spencer

-6

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

<html> 
<body> 

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


// 

</div> 

</body> 
</html>

источник

2013-01-31 02:37:05

этот ответ - baaaddd ... улучшить свои знания человек – Gags

127

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

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

источник

2013-09-22 04:09:40 Andrew

Вам также не нужно придавать элементу ширину? –

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

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

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

убедитесь, что ваш родитель DIV имеет положение: относительная

и элемент, который вы хотите центр, установить его высоту и ширину. используйте следующий 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/

источник

2013-12-04 05:28:07 STEEL

Только решение, которое работает для меня. Родитель настроен на гибкость, гибкость и переполнение. Ребенок был помещен вне рамки для изображений, больших, чем у родителя. Кажется, он не знал о ширине родителя. Теперь это исправлено. Большое спасибо! – Kai

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

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>

источник

2016-01-27 22:10:27

Это один ответ, который сработал для меня. Благодаря! –

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

источник

2017-02-21 14:05:39

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

ответ

Смежные вопросы