Gostaria de criar uma position: fixed;
caixa pop - up centralizada na tela com largura e altura dinâmicas. Eu usei margin: 5% auto;
para isso. Sem position: fixed;
ele, centra-se bem na horizontal, mas não na vertical. Depois de adicionar position: fixed;
, ele nem é centralizado horizontalmente.
Aqui está o conjunto completo:
.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}
<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div>
Como centralizo esta caixa na tela com CSS?
fonte
Aqui está uma abordagem moderna para centralizar horizontalmente um elemento com uma largura dinâmica - ele funciona em todos os navegadores modernos; suporte pode ser visto aqui .
Exemplo atualizado
Para centralização vertical e horizontal, você pode usar o seguinte:
Exemplo atualizado
Você também pode adicionar mais propriedades prefixadas pelo fornecedor (veja os exemplos).
fonte
Ou apenas adicione
left: 0
eright: 0
ao seu CSS original, o que faz com que ele se comporte de maneira semelhante a um elemento não fixo normal e a técnica de margem automática usual funciona:Observe que você precisa usar um HTML (X) válido
DOCTYPE
para que ele se comporte corretamente no IE (que você deve ter de qualquer maneira ..!)fonte
right
propriedade seleft
também estiver definido! ( msdn.microsoft.com/en-us/library/… observa queleft
eright
apenas têm suporte "parcial" no IE7). OK, reconheço esta solução não é bom se o suporte IE7 é importante, mas um grande truque para se lembrar para o futuro :)Adicione um contêiner como:
Em seguida, coloque sua caixa nesta div fará o trabalho.
fonte
display: inline-block
para que isso funcione. (Alguns outros valores de exibição também pode funcionar, como otable
.)margin:auto;
e alterar a largura parawidth:50%
ouwidth:400px
. então o conteúdo pode ser texto direto, elementos de bloco ou elementos embutidos.Basta adicionar:
fonte
position: fixed
, e é disso que se trata a questão. Se estiver errado, edite sua resposta para incluir um snippet de código executável.position: fixed
, desde que defina omax-width
ouwidth
para o elementono interior, pode haver qualquer elemento com largura, altura ou sem difenet. todos estão centralizados.
fonte
Esta solução não exige que você defina uma largura e altura para sua div pop-up.
http://jsfiddle.net/4Ly4B/33/
E, em vez de calcular o tamanho do pop-up e menos a metade do topo, o javascript está redimensionando o popupContainer para preencher a tela inteira ...
(100% de altura, não funciona ao usar o display: célula de tabela; (que é necessário para centralizar algo verticalmente)) ...
De qualquer forma, funciona :)
fonte
Não estava funcionando no IE7.
Alterado para
Começou a trabalhar, mas nos demais navegadores ele parou de funcionar! Então usado dessa maneira para o IE7 abaixo
fonte
Você pode basicamente envolvê-lo em outro
div
e definirposition
comofixed
.fonte
Eu usei
vw
(largura da janela de exibição) evh
(altura da janela de exibição). a janela de exibição é sua tela inteira.100vw
é a largura total da tela e100vh
a altura total.fonte
Para fixar a posição, use isto:
fonte
Uma resposta possível :
fonte
Tente usar isso para elementos horizontais que não serão centralizados corretamente.
width: calc (width: 100% - width, o que mais estiver fora, centralizando-o )
Por exemplo, se sua barra de navegação lateral for 200px:
fonte
Eu apenas uso algo assim:
Ele centraliza a caixa de diálogo horizontal e verticalmente para mim, e posso usar diferentes larguras e alturas para ajustar diferentes resoluções de tela e torná-las responsivas, com consultas de mídia.
Não é uma opção se você ainda precisar fornecer suporte para navegadores em que as propriedades personalizadas de CSS ou
calc()
não são suportadas (verifique em caniuse).fonte
Este funcionou melhor para mim:
fonte
A única solução infalível é usar a tabela align = center como em:
Não posso acreditar que pessoas de todo o mundo desperdiçam esses copiosos tempo bobo para resolver um problema tão fundamental quanto centrar uma div. A solução css não funciona em todos os navegadores, a solução jquery é uma solução computacional de software e não é uma opção por outros motivos.
Eu perdi muito tempo repetidamente para evitar o uso da tabela, mas a experiência me diz para parar de combatê-la. Use tabela para centralizar div. Funciona o tempo todo em todos os navegadores! Nunca mais se preocupe.
fonte
position:fixed
.