Centralizar uma 'div' no meio da tela, mesmo quando a página é rolada para cima ou para baixo?

126

Tenho na minha página um botão que, quando clicado, exibe um div(estilo pop-up) no meio da minha tela.

Estou usando o seguinte CSS para centralizar divno meio da tela:

.PopupPanel
{
    border: solid 1px black;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;

    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}

Esse CSS funciona bem desde que a página não seja rolada para baixo.

Mas, se eu colocar o botão na parte inferior da minha página, quando ele for clicado, ele divserá exibido na parte superior e o usuário precisará rolar para cima para visualizar o conteúdo da div.

Gostaria de saber como exibir o divmeio da tela, mesmo quando a página foi rolada.

— tanya
fonte

pergunta pergunta. Por que você está subtraindo a margem superior: (200) e a margem esquerda? Eu sinto que este é o meio da altura e largura, mas por que precisamos fazer isso para obter o centro absoluto? Os 50% da esquerda e os 50% superiores não devem fazer o truque?

— jmoon90

@ jmoon90 left: 50%; top: 50%Move o canto superior esquerdo do .PopupPanelpara o centro da tela. Em seguida, movemos a metade da largura e altura de volta para o centro do centro. Consulte Centralização em css-tricks.com

— kub1x 30/03

189

Mude o positionatributo para em fixedvez de absolute.

— BraedenP
fonte

2

E se você precisar rolar a div pop-up e maior que a tela?

— Darcbar 27/02/12

Lembre-se de que essa não é a solução mais responsiva (mas uma solução perfeita para o problema acima). Verifique getbootstrap.com/javascript/#modals e consulte seu DevTools para obter algumas boas idéias sobre como trabalhar com seus pop-ups / modais.

— precisa

31

Mude position:absolute;paraposition:fixed;

— Richard JP Le Guen
fonte

17

Citação : gostaria de saber como exibir a div no meio da tela, se o usuário rolou para cima / para baixo.

mudança

position: absolute;

Para

position: fixed;

Especificações do W3C para position: absolutee para position: fixed.

— Sparky
fonte

6

Acabei de encontrar um novo truque para centralizar uma caixa no meio da tela, mesmo que você não tenha dimensões fixas. Digamos que você queira uma caixa com 60% de largura / 60% de altura. A maneira de centralizá-lo é criando 2 caixas: uma caixa "contêiner" que fica à esquerda: 50% superior: 50%, e uma caixa "texto" dentro com a posição reversa à esquerda: -50%; topo: -50%;

Funciona e é compatível com vários navegadores.

Confira o código abaixo, você provavelmente terá uma explicação melhor:

jQuery('.close a, .bg', '#message').on('click', function() {
  jQuery('#message').fadeOut();
  return false;
});

html, body {
  min-height: 100%;
}

#message {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

#message .container {
  height: 60%;
  left: 50%;
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 60%;
}

#message .container .text {
  background: #fff;
  height: 100%;
  left: -50%;
  position: absolute;
  top: -50%;
  width: 100%;
}

#message .bg {
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="message">
  <div class="container">
    <div class="text">
      <h2>Warning</h2>
      <p>The message</p>
      <p class="close"><a href="#">Close Window</a></p>
    </div>
  </div>
  <div class="bg"></div>
</div>

Expandir snippet

— SequenceDigitale.com
fonte

4

O método correto é

.PopupPanel
{
    border: solid 1px black;
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;
    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}

— Sakthi Karthik
fonte