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?

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

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