Posicionando o elemento <div> no centro da tela

134

Quero posicionar um elemento <div>(ou a <table>) no centro da tela, independentemente do tamanho da tela. Em outras palavras, o espaço deixado em 'superior' e 'inferior' deve ser igual e o espaço deixado em lados 'direito' e 'esquerdo' deve ser igual. Eu gostaria de fazer isso apenas com CSS.

Eu tentei o seguinte, mas não está funcionando:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

Nota:
De qualquer maneira, é bom se o <div>elemento (ou <table>) rola com o site ou não. Só quero que ele seja centralizado quando a página for carregada.

javascript css html

— sumit
fonte

1

possível duplicata de como alinhar uma <div> para o meio da página

— Purag

Oi Purmou, a pergunta que você mencionou se posicionar no meio da página, ou seja, espaço esquerdo e direito iguais - não os espaços superior e inferior iguais!

— sumit 25/03

1

possível duplicata Qual é a melhor maneira de centralizar a Div verticalmente com CSS

— Outis

possível duplicata de Como centralizar uma div em uma div - horizontalmente?

— bjb568

201

A maneira mais fácil, se você tiver uma largura e altura fixas:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

Por favor, não use estilos embutidos! Aqui está um exemplo de trabalho http://jsfiddle.net/S5bKq/ .

— einstein
fonte

13

Para aqueles que procuram uma altura dinâmica: stackoverflow.com/questions/396145/...

— pulkitsinghal

1

@ woho87 por que não usar estilos embutidos? pelas razões bem conhecidas ou há algo mais que eu deveria saber para o exemplo específico?

— Sharky

O @KatrinRaimond é pelos motivos conhecidos, documentados aqui stackoverflow.com/questions/2612483/… e aqui webdesign.about.com/od/css/a/aa073106.htm .

— Alex

Mas, definir o topo do divElement na unidade '%' faz com que o divElement ocupe espaço vertical, a menos que divElement seja colocado dentro de um elemento relativo.

— sudip 8/09/15

é posição: fixa ou posição: absoluta?

— precisa saber é o seguinte

151

Com as transformações sendo mais onipresentemente suportadas atualmente, você pode fazer isso sem saber a largura / altura do pop-up

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Fácil! JSFiddle aqui: http://jsfiddle.net/LgSZV/

Atualização: Confira https://css-tricks.com/centering-css-complete-guide/ para obter um guia bastante completo sobre a centralização de CSS. Adicionando-o a esta resposta, pois parece ter muitos olhos.

— XwipeoutX
fonte

1

Se o conteúdo do pop-up estiver sendo usado overflow:auto, a rolagem é estragada no IE9. :(

— joescii

2

Não é tão onipresente. O IE8 captura 20% do compartilhamento do navegador e não é compatível . Portanto, leve apenas este para o IE9 +.

— Fotanus

7

+1 por ser a única solução em que você não precisa especificar altura e largura ou usar Javascript.

— Jan Derk

@fotanus, quando os desenvolvedores deixarem de oferecer suporte ao IE 9 <, os usuários migrarão ou atualizarão seu navegador.

— Diego Vieira

@DIegoVieira infelizmente não é assim que as coisas funcionam. Veja a tragédia dos comuns . Portanto, as pessoas continuarão suportando o IE8 porque não querem perder esse compartilhamento, e as pessoas continuarão usando porque funciona.

— Fotanus 26/03/2015

33

Defina a largura e a altura e você é bom.

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

Se você deseja que as dimensões do elemento sejam flexíveis (e não se importe com navegadores herdados), siga a resposta do XwipeoutX .

— Erik Aigner
fonte

1

Essa é a resposta mais limpa e simples e também é compatível com dispositivos móveis . +1

— Rust

22

Funcionará para qualquer objeto. Mesmo se você não souber o tamanho:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

— luminousmen
fonte

17

Agora, é mais fácil com HTML 5 e CSS 3:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

— Daniel De León
fonte

12

Se você tiver uma divposição absoluta fixa fixa , a 50% da margem superior e 50% esquerda e margem negativa superior e esquerda de metade da altura e largura, respectivamente. Ajuste às suas necessidades:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

— elclanrs
fonte

9

Use flex . Muito mais simples e funcionará independentemente do seu divtamanho:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Expandir snippet

— Caner
fonte

3

Eu faria isso em CSS:

div.centered {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

depois em HTML:

<div class="centered"></div>

— Eduardo Lago Aguilar
fonte

0

tente isso

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

Ou isto

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>

— Dali
fonte

0

Se houver alguém procurando uma solução,

Eu achei isto,

É a melhor solução que encontrei ainda!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

Espero que goste!

— Christopher Atwood
fonte

0

Outra abordagem fácil e flexível para exibir o bloco no centro: usando o alinhamento de texto nativo com line-heighte text-align.

Solução:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

E amostra html:

<div class="parent">
  <div class="child">My center block</div>
</div>

Tornamos a div.parenttela cheia e o filho único dele se div.childalinha como texto display: inline-block.

Vantagens:

flexibilidade, sem valores absolutos
redimensionar suporte
funciona bem no celular

Exemplo simples no JSFiddle: https://jsfiddle.net/k9u6ma8g

— Pavel Shorokhov
fonte

0

Solução alternativa que não usa posição absoluta:
vejo muitas respostas absolutas de posição. Eu não poderia usar a posição absoluta sem quebrar outra coisa. Portanto, para aqueles que não conseguiram, aqui está o que eu fiz:
https://stackoverflow.com/a/58622840/6546317 (publicado em resposta a outra pergunta).

A solução se concentra apenas na centralização vertical porque os elementos de meus filhos já estavam centralizados horizontalmente, mas o mesmo poderia ser aplicado se você não pudesse centralizá-los horizontalmente de outra maneira.

— reddtoric
fonte

-2

tente isto:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;

— user3423956
fonte

2

Esta é efetivamente o mesmo que a resposta aceita

— apaul

sim, mas aqui eu explicar o funcionamento da margem superior e esquerda ... alguém não sabe disso ....

— user3423956

1

Em seguida, ele é efetivamente o mesmo que a resposta segunda

— apaul