css - fixo - posicionar uma div no meio da tela




Como posicionar um div no meio da tela quando a página é maior que a tela (10)

Oi eu estou usando algo parecido com o seguinte para obter um div posicionado 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 com isso é posicionar o item no meio da página e não na tela. Portanto, se a página tiver alguns pixels de altura e eu estiver no topo da página (a parte superior da peça é exibida na tela), quando faço a div aparecer, ela nem aparece na tela. Você tem que rolar para baixo para visualizá-lo.

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


Acabei de testar o código exato em uma página de teste e ele centralizou o div perfeitamente na página, mesmo com cerca de 100 <br /> antes para tentar empurrá-lo para baixo.

Talvez tente verificar o resto do seu código para ver se você tem algo que está sobrescrevendo os valores do DIV ou que está afetando seu DIV para causar esses problemas.


Basta colocar 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>

Eu acho que esta é 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>


Na sua página de script ...

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

Use uma classe média na div ...

   <div class="a-middle">

Resposta curta, basta adicionar position:fixed e que vai resolver o seu problema


Se você sabe o tamanho do elemento, você pode simplesmente usar a propriedade de margin :

#mydiv {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px; //assuming that #mydiv has the height of 100px
  margin-left: -100px; //assuming that #mydiv has the width of 200px
}

Observe que você deve usar metade da largura e altura do elemento

Mas se você não tiver certeza do tamanho, isso fará o truque:

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

basta adicionar a position:fixed e irá mantê-la visível mesmo que você role 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;
}

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


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

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




center