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

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

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