Come allineare l'elemento posizionato in modo assoluto al centro?

103

Sto cercando di impilare due tele insieme e renderle una tela a doppio strato.

Ho visto un esempio qui:

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

Ma vorrei allineare entrambe le tele al centro dello schermo. Se imposto il valore di leftcome costante, mentre cambio l'orientamento dello schermo (come sto facendo aps su iPad) la tela non rimarrà al centro dello schermo come si comporta in

<div align="center">

Qualcuno può aiutare, per favore?

css html5-canvas

— PaulLing
fonte

222

Se imposti entrambi i margini sinistro e destro su zero e i margini sinistro e destro su automatico, puoi centrare un elemento posizionato in modo assoluto.

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

— Andrea
fonte

Non è necessario anche dare una larghezza all'elemento?

— Gabriel Florit

1

Non credo sia necessario in questo caso.

— Andrew

Ho appena provato e funziona, dovrebbe essere contrassegnata come risposta corretta

— R Reveley

È possibile utilizzare la modifica dei valori sinistro o destro per spostare l'oggetto fuori dal centro, fisso. Usando left: 80px;si sposterà l'oggetto di 40px (!) A destra del centro.

— SPRBRN

4

Nota: funziona solo se l'elemento con stile ha una data larghezza. (px o%)

— Johnny Wong

94

Se vuoi allineare al centro un elemento senza conoscerne la larghezza e l'altezza, fai:

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

Esempio:

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

Espandi lo snippet

— Vinicius Santana
fonte

16

Hai provato a usare ?:

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

Non sono sicuro che funzionerà, ma vale la pena provare ...

Modifica minore : aggiunta la parte del margine sinistro, come sottolineato nei commenti di Chetan ...

— Deleteman
fonte

Sì, l'ho provato, ma la tela "inizia" dal centro ma non "posizionata" al centro dello schermo. C'è comunque da impostare a sinistra: 50% e spostare di nuovo la tela a sinistra?

— PaulLing

2

@PaulLingmargin-left: <negative half the width>

— Chetan S

Quello che ha detto Chetan .. mi ha battuto: P Modificherò la mia risposta per le generazioni future ...

— Deleteman

La larghezza dello schermo è diversa quando l'iPad è posizionato con un orientamento diverso

— PaulLing

Intendeva metà della larghezza del tuo elemento canvas ..., che lo renderebbe margin-left: -50px;

— Deleteman

13

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

— Mihai Ciobanu
fonte

9

prova questo metodo, funziona bene per me

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

— sottoindici pm
fonte

7

Tutto quello che devi fare è

assicurati che il tuo DIV genitore abbia la posizione: relativa

e l'elemento che vuoi centrare, impostalo su altezza e larghezza. usa il seguente 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/

— ACCIAIO
fonte

2

L'unica soluzione che funziona per me. Parent è impostato su flex, flex-grow e overflow. Il bambino è stato posizionato fuori dall'inquadratura per immagini più grandi del genitore. Non sembrava essere a conoscenza della larghezza del genitore. Adesso è stato risolto. Grazie tante!

— Kai

0

Sposta il div genitore al centro con

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

Sposta il secondo strato sull'altro con

position: relative;
left: -100px;

— Spencer
fonte