Wie kann man das absolut positionierte Element zur Mitte ausrichten?

103

Ich versuche, zwei Leinwand zusammen zu stapeln und daraus eine Leinwand mit zwei Ebenen zu machen.

Ich habe hier ein Beispiel gesehen:

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

Aber ich möchte beide Leinwand in der Mitte des Bildschirms ausrichten. Wenn ich den Wert leftals Konstante einstelle , während ich die Ausrichtung des Bildschirms ändere (während ich Aps auf dem iPad mache), bleibt die Leinwand nicht in der Mitte des Bildschirms, wie sie sich verhält

<div align="center">

Kann mir bitte jemand helfen?

PaulLing
quelle

Antworten:

222

Wenn Sie sowohl den linken als auch den rechten Rand auf Null und den linken und rechten Rand auf Auto setzen, können Sie ein absolut positioniertes Element zentrieren.

position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
Andrew
quelle
Müssen Sie dem Element nicht auch eine Breite geben?
Gabriel Florit
1
Ich denke nicht, dass es in diesem Fall notwendig ist.
Andrew
Ich habe
Sie können den linken oder rechten Wert ändern, um das Objekt fest aus der Mitte zu verschieben. Mit left: 80px;wird das Objekt 40px (!) Rechts von der Mitte verschoben.
SPRBRN
4
Anmerkung: Funktioniert nur, wenn das gestaltete Element eine bestimmte Breite hat. (entweder px oder%)
Johnny Wong
94

Wenn Sie ein Element zentrieren möchten, ohne dessen Breite und Höhe zu kennen, gehen Sie wie folgt vor:

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

Beispiel:

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

Vinicius Santana
quelle
16

Haben Sie versucht, zu verwenden?:

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

Ich bin mir nicht sicher, ob es funktionieren wird, aber es ist einen Versuch wert ...

Kleinere Änderungen : Der Teil am linken Rand wurde hinzugefügt, wie in den Kommentaren von Chetan ...

Deleteman
quelle
Ja, ich habe es versucht, aber die Leinwand "beginnt" in der Mitte, wird aber nicht in der Mitte des Bildschirms "platziert". Gibt es sowieso links zu setzen: 50% und die Leinwand wieder nach links zu verschieben?
PaulLing
2
@ PaulLingmargin-left: <negative half the width>
Chetan S
Was Chetan gesagt hat ... hat mich geschlagen: P Ich werde meine Antwort für zukünftige Generationen bearbeiten ...
Deleteman
Die Breite des Bildschirms ist unterschiedlich, wenn das iPad in einer anderen Ausrichtung platziert wird
PaulLing
Er meinte die halbe Breite Ihres Canvas-Elements ..., das würde es am linken Rand machen: -50px;
Deleteman
13
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
Mihai Ciobanu
quelle
8

Probieren Sie diese Methode aus und funktionieren Sie gut für mich

position: absolute;
left: 50%;
transform: translateX(-50%); 
subindas pm
quelle
7

Alles was du tun musst, ist,

Stellen Sie sicher, dass Ihr Eltern-DIV die Position: relativ hat

und das Element, das Sie zentrieren möchten, legen Sie eine Höhe und Breite fest. Verwenden Sie das folgende 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/
STAHL
quelle
2
Einzige Lösung, die bei mir funktioniert. Die Eltern sind auf Flex, Flex-Grow und Overflow eingestellt. Das Kind wurde für Bilder, die größer als das Elternteil waren, außerhalb des Rahmens positioniert. Es schien sich der Breite der Eltern nicht bewusst zu sein. Es ist jetzt behoben. Vielen Dank!
Kai
0

Verschieben Sie das übergeordnete Div mit in die Mitte

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

Bewegen Sie die zweite Ebene mit über die andere

position: relative;
left: -100px;
Spencer
quelle