Como alinhar o elemento posicionado absolutamente ao centro?

103

Estou tentando empilhar duas telas juntas e torná-las uma tela de camadas duplas.

Eu vi um exemplo aqui:

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

Mas eu gostaria de definir o alinhamento da tela no centro da tela. Se eu definir o valor de leftcomo uma constante, enquanto eu mudo a orientação da tela (como estou fazendo aps no iPad), a tela não permanecerá no meio da tela como age em

<div align="center">

Alguém pode ajudar por favor?

css html5-canvas

— PaulLing
fonte

222

Se você definir as margens esquerda e direita como zero e as margens esquerda e direita como automáticas, poderá centralizar um elemento posicionado de forma absoluta.

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

— Andrew
fonte

Você também não precisa dar largura ao elemento?

— Gabriel Florit

1

Não acho que seja necessário neste caso.

— Andrew

Acabei de tentar isso e funciona, deve ser marcado como a resposta correta

— R Reveley

Você pode alterar os valores da esquerda ou da direita para mover o objeto para fora do centro, fixo. Usando left: 80px;irá mover o objeto 40px (!) Para a direita do centro.

— SPRBRN

4

Observação: Só funciona se o elemento estilizado tiver uma determinada largura. (px ou%)

— Johnny Wong

94

Se você deseja alinhar ao centro um elemento sem saber sua largura e altura, faça:

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

Exemplo:

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

— Vinicius santana
fonte

16

Você já tentou usar ?:

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

Não tenho certeza se vai funcionar, mas vale a pena tentar ...

Edição secundária : Adicionada parte da margem esquerda, conforme apontado nos comentários de Chetan ...

— Deleteman
fonte

Sim, eu tentei isso, mas a tela "começa" do meio, mas não "colocada" no meio da tela. Existe alguma maneira de definir para a esquerda: 50% e mover a tela para a esquerda novamente?

— PaulLing,

2

@PaulLingmargin-left: <negative half the width>

— Chetan S

O que Chetan disse ... antes de mim: P Vou editar minha resposta para as gerações futuras ...

— Deleteman

A largura da tela é diferente quando o iPad é colocado em uma orientação diferente

— PaulLing,

Ele se referia à metade da largura do seu elemento de tela ..., isso tornaria a margem esquerda: -50px;

— Deleteman

13

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

— Mihai Ciobanu
fonte

9

tente este método, funcionando bem para mim

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

— subindas pm
fonte

7

Tudo o que tem a fazer é,

certifique-se de que seu pai DIV tenha position: relative

e o elemento que você deseja centralizar, defina uma altura e largura. use o seguinte 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/

— AÇO
fonte

2

Única solução que funciona para mim. Parent está configurado para flex, flex-grow & overflow. A criança foi posicionada fora do quadro para imagens maiores que o pai. Ele não parecia estar ciente da largura do pai. Está consertado agora. MUITO obrigado!

— Kai

0

Mova o div pai para o meio com

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

Mova a segunda camada sobre a outra com

position: relative;
left: -100px;

— Spencer
fonte