Jak wyrównać element pozycjonowany absolutnie do środka?

104

Próbuję ułożyć razem dwa płótna i uczynić je podwójnym płótnem.

Widziałem tutaj przykład:

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

Ale chciałbym ustawić oba płótna wyrównane na środku ekranu. Jeśli ustawię wartość leftjako stałą, podczas gdy zmienię orientację ekranu (tak jak robię aps na iPadzie), płótno nie pozostanie na środku ekranu, tak jak działa

<div align="center">

Czy ktoś może pomóc, proszę?

css html5-canvas PaulLing
źródło

Odpowiedzi:

223

Jeśli ustawisz lewy i prawy na zero, a lewy i prawy margines na auto, możesz wyśrodkować element pozycjonowany absolutnie.

position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
Andrzej
źródło
Nie musisz też nadawać elementowi szerokości?
Gabriel Florit
1
Nie sądzę, żeby to było konieczne w tym przypadku.
Andrew,
Właśnie wypróbowałem to i działa, powinno być oznaczone jako poprawna odpowiedź
Reveley,
Możesz użyć zmiany wartości w lewo lub w prawo, aby przesunąć obiekt poza środek, ustalony. Użycie left: 80px;przesunie obiekt o 40px (!) Na prawo od środka.
SPRBRN
4
Uwaga: działa tylko wtedy, gdy stylizowany element ma określoną szerokość. (px lub%)
Johnny Wong,
95

Jeśli chcesz wyśrodkować element, nie znając jego szerokości i wysokości, wykonaj:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Przykład: 

*{
  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>
Rozwiń fragment

Vinicius Santana
źródło
16

Czy próbowałeś użyć ?:

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

Nie jestem pewien, czy to zadziała, ale warto spróbować ...

Niewielka zmiana : dodano lewą część marginesu, jak wskazał w komentarzach Chetana ...

Deleteman
źródło
Tak, próbowałem tego, ale płótno „zaczyna się” od środka, ale nie jest „umieszczane” na środku ekranu. Czy w ogóle można ustawić w lewo: 50% i ponownie przesunąć płótno w lewo?
PaulLing,
2
@PaulLingmargin-left: <negative half the width>
Chetan S,
To, co powiedział Chetan ... pobije mnie: P Zmienię moją odpowiedź dla przyszłych pokoleń ...
Deleteman,
Szerokość ekranu jest inna, gdy iPad jest umieszczony w innej orientacji
PaulLing,
Miał na myśli połowę szerokości elementu płótna ..., co sprawiłoby, że byłby to margin-left: -50px;
Deleteman,
14 
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
Mihai Ciobanu
źródło
9

wypróbuj tę metodę, która działa dobrze dla mnie

position: absolute;
left: 50%;
transform: translateX(-50%);
subindas pm
źródło
7

Wszystko co musisz zrobić to,

upewnij się, że twój rodzic DIV ma stanowisko: względne

a element, który chcesz wyśrodkować, ustaw jego wysokość i szerokość. użyj następującego 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/
STAL
źródło
2
Jedyne rozwiązanie, które działa dla mnie. Parent jest ustawiony na flex, flex-grow & overflow. Dziecko zostało umieszczone poza kadrem w przypadku obrazów większych niż rodzic. Wydawało się, że nie jest świadomy szerokości rodzica. To jest teraz naprawione. Wielkie dzięki!
Kai
0

Przenieś nadrzędny element DIV na środek za pomocą

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

Przesuń drugą warstwę na drugą za pomocą

position: relative;
left: -100px;
Spencer
źródło