¿Cómo alinear el elemento absolutamente posicionado al centro?

103

Estoy tratando de apilar dos lienzos juntos y convertirlos en un lienzo de doble capa.

He visto un ejemplo aquí:

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

Pero me gustaría alinear ambos lienzos en el centro de la pantalla. Si establezco el valor de leftcomo una constante, mientras cambio la orientación de la pantalla (como estoy haciendo aps en iPad), el lienzo no permanecerá en el medio de la pantalla como actúa en

<div align="center">

¿Alguien puede ayudar, por favor?

css html5-canvas PaulLing
fuente

Respuestas:

222

Si establece los márgenes izquierdo y derecho en cero, y los márgenes izquierdo y derecho en automático, puede centrar un elemento absolutamente posicionado.

position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
Andrés
fuente
¿No necesitas también darle un ancho al elemento?
Gabriel Florit
1
No creo que sea necesario en este caso.
Andrew
Intenté esto y funciona, debe marcarse como respuesta correcta
R Reveley
Puede usar cambiar los valores izquierdo o derecho para mover el objeto fuera del centro, fijo. El uso left: 80px;moverá el objeto 40px (!) A la derecha del centro.
SPRBRN
4
Observación: solo funciona si el elemento con estilo tiene un ancho determinado. (ya sea px o%)
Johnny Wong
94

Si desea centrar la alineación de un elemento sin saber su ancho y alto, haga:

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

Ejemplo: 

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

Vinicius Santana
fuente
16

¿Has probado a usar ?:

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

No estoy seguro de si funcionará, pero vale la pena intentarlo ...

Edición menor : se agregó la parte del margen izquierdo, como se señaló en los comentarios de Chetan ...

Deleteman
fuente
Ya he intentado esto, pero el lienzo "empieza" desde el medio pero no "colocado" en el medio de la pantalla. ¿Hay alguna forma de establecer left: 50% y mover el lienzo a la izquierda nuevamente?
PaulLing
2
@PaulLingmargin-left: <negative half the width>
Chetan S
Lo que dijo Chetan ... me adelantó: P
Editaré
El ancho de la pantalla es diferente cuando el iPad se coloca en una orientación diferente
PaulLing
Quería decir la mitad del ancho de su elemento de lienzo ..., eso lo haría margin-left: -50px;
Deleteman
13 
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
Mihai Ciobanu
fuente
9

prueba este método, funciona bien para mí

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

Todo lo que tienes que hacer es,

asegúrese de que su padre DIV tenga la posición: relativa

y el elemento que desea centrar, establezca una altura y un ancho. usa el siguiente 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/
ACERO
fuente
2
La única solución que funciona para mí. Parent está configurado para flexionar, flexionar y desbordar. El niño se colocó fuera del marco para imágenes más grandes que el padre. No parecía tener en cuenta el ancho del padre. Está arreglado ahora. ¡Muchas gracias!
Kai
0

Mueva el div padre al medio con

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

Mueva la segunda capa sobre la otra con

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