Como posicionar uma div no meio da tela quando a página é maior que a tela

141

Oi, eu estou usando algo semelhante ao seguinte para obter uma div posicionada no meio da tela:

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

No entanto, o problema é que ele posiciona o item no meio da página e não na tela. Portanto, se a página estiver com poucas telas de altura e eu estiver no topo da página (a parte superior da parte é exibida na tela) quando eu faço a div aparecer, ela nem está na tela. Você precisa rolar para baixo para visualizá-lo.

Alguém pode me dizer como você faria isso aparecer no meio da tela?

css html window center Codificador 2
fonte

Acabei de testar esse código exato em uma página de teste e ele centralizou a div perfeitamente na página, mesmo com cerca de 100 <br />antes de tentar empurrá-lo para baixo. Talvez tente verificar o restante do seu código para ver se você tem algo que está sobrescrevendo os valores da DIV ou que está afetando sua DIV para causar esses problemas.

Eli

269

basta adicionar position:fixede ele será mantido em exibição, mesmo se você rolar para baixo. veja em http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

Hussein
fonte

1

Você está salva-vidas .. Uma solução simples funciona bem mesmo se o elemento tem transformar escala aplicada ..

Vinnie

91

Eu acho que essa é uma solução simples:

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>

Expandir snippet

user2684935
fonte

7

esta abordagem é muito mais melhor do que resposta aprovado

Viacheslav Dobromyslov

2

amei esse, mas isso funciona no navegador "mais antigo"?

BernaMariano

14

Use transformação;

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

Solução Javascript:

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");

Erdogan
fonte

5

Apenas coloque margin:auto;

#mydiv {
    margin:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

<div id="mydiv">Test Div</div>

fonte

5

Tente este.

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

Chandan Sharma
fonte

1

Eu acho que este é mais útil porque você não precisa aplicar nenhum estilo ao elemento pai.

canbax 11/03

3

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

Isso funcionou para mim

Abraão
fonte

2

Embora isso possa ser tecnicamente correta, você quer incluir uma descrição breve de por que isso resolve o problema para o contexto

drneel

2

Resposta curta, basta adicionar position:fixede isso resolverá o seu problema

Parth
fonte

1

<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>

Maitrey Malve
fonte

A pergunta foi feita na entrevista "como você alinha o centro div da tela?"

Maitrey Malve 15/17

1

Bem, abaixo está o exemplo de trabalho para isso.

Isso manipulará a posição central se você redimensionar a página da Web ou carregar em qualquer tamanho.

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

Expandir snippet

Na amostra acima, carregando div estará sempre no centro.

Esperando que isso ajude você :)

Vikash Pandey
fonte

1

Duas maneiras de posicionar uma tag no meio da tela ou sua tag pai:

Usando posições:

Defina a tag principal positioncomo relative(se a tag de destino tiver uma tag principal) e defina o estilo da tag de destino como este:

#center {
  ...  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Usando flex:

O estilo da tag pai deve ficar assim:

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}

Alex Jolig
fonte

0

Na sua página de script ...

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

Use classe média na Div ...

   <div class="a-middle">

Antony Jack
fonte

-1

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

Expandir snippet

Lăng Minh
fonte

-1

USANDO O FLEX

display: flex;
height: 100%;
align-items: center;
justify-content: center;

ASIR THERANS RAJA M
fonte

Isso centraliza o conteúdo no elemento pai ou na página, não na tela.

Sean

-2

width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;

LukASh
fonte

Adicione algumas explicações

Pankaj Makwana

-4

Para isso, você precisaria detectar o tamanho da tela. Isso não é possível com CSS ou HTML; você precisa de JavaScript. Aqui está a entrada Mozilla Developer Center nas propriedades da janela https://developer.mozilla.org/en/DOM/window#Properties

Detecte a altura disponível e posicione adequadamente.

Scott Radcliff
fonte

Como posicionar uma div no meio da tela quando a página é maior que a tela

Respostas:

Usando posições:

Usando flex: