Alinhamento ao centro em uma Div absolutamente posicionada

93 
div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

O div está no topo, mas não posso centralizá-lo com <center>ou margin: 0 auto;

html css xhtml Steve
fonte

Respostas:

152

Seu problema pode ser resolvido se você der divuma largura fixa, da seguinte forma:

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}
JacobE
fonte
1
Não sei por que não pensei nisso, embora usemos a mesma técnica de centralização vertical o tempo todo ... Obrigado de qualquer maneira, você me economizou muito tempo.
Aayush
1
e se o usuário tiver rolado verticalmente para baixo o div aparece no topo da página enquanto deveria aparecer na área visível
PUG
Estou exibindo miniaturas de imagens reszied dinamicamente em meu div de sobreposição, então não sei a largura.
PUG
4
esta é apenas uma solução alternativa, stackoverflow.com/questions/1776915/… parece ser a solução
PUG
1
Esta não é a resposta certa. Tipos de mídia diferentes não suportam este snippet.
Sushan,
97 
div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}
Matheus Oliveira
fonte
3
Como é que isso funciona? Você pode explicar por que sua resposta é válida?
afuzzyllama
1
Eu realmente gosto desse método em vez de outros 99% do tempo, você não tem que lidar com preenchimento, bordas, etc. Eu nunca vi isso falhar, da próxima vez forneça um exemplo se ele falhar para você.
Dan
1
O legal dessa solução é que ela funciona com porcentagens também, mas não tenho certeza se é compatível com vários navegadores
maljukan
1
Uau. Eu não esperava que isso funcionasse, mas funcionou para mim como um encanto
Awais Umar
4
Eu concordo que essa deve ser a resposta correta, uma margem de -200px grita hack para mim.
Mani5556
36

Sei que estou atrasado para a festa, mas achei melhor dar uma resposta aqui para pessoas que precisam posicionar horizontalmente um item absoluto, quando você não sabe sua largura exata.

Experimente isto:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

A mesma técnica também pode ser aplicada, para quando você precisar de alinhamento vertical, simplesmente ajustando as propriedades como:

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
Michael Giovanni Pumo
fonte
1
Uau. Isso é incrível! Você poderia explicar como funciona? Edit: Fiz alguma caça e parece que a esquerda: 50% move a localização esquerda do div para o centro, que não é realmente o centro. Mas o translateX o desloca para trás em 50% da largura do conteúdo
Aziz Javed de
2
O posicionamento absoluto será posicionado a partir do canto superior esquerdo de um item. O uso de traduzir o mudará para a quantidade relativa ao seu tamanho.
Michael Giovanni Pumo de
3
Michael, só queria que você soubesse, você não estava atrasado para o botão da festa ... e para quem não sabe: transform: translate (-50%, -50%); faz a centralização vertical e horizontal com 1 linha
Marvel Moe
4

Para centralizá-lo verticalmente e horizontalmente, faça o seguinte:

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}
Armin
fonte
0

Se for necessário que você tenha uma largura relativa (em porcentagem), você pode envolver seu div em um posicionado absoluto:

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

Lembre-se de que, para posicionar um elemento de forma absoluta, o elemento pai deve ser posicionado de forma relativa.

Dalvallana
fonte
0

Eu estava tendo o mesmo problema e minha limitação era que não posso ter uma largura predefinida. Se o seu elemento não tiver uma largura fixa, tente este

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

então modifique seu html para ficar assim

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>
Usman Shaukat
fonte
0

Ou você pode usar unidades relativas, por exemplo

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}
Aliaksei
fonte
0 

.contentBlock {
    width: {define width}
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
}
Expandir trecho

Panwar
fonte
-22

Sim:

div#thing { text-align:center; }

fonte
5
Isso alinhará o conteúdo em um div. Não vai alinhar o div no centro da página. Ele também não alinhará um div posicionado de forma absoluta de qualquer outra forma que não o conteúdo dentro dele que faz parte do fluxo do documento.
CarterMan