Como criar uma CSS para um diálogo de confirmação flutuante centrado?
Pergunta
Eu estou procurando uma maneira de exibir um diálogo de confirmação que sempre centralizada na página e flutuante sobre a página.
Tentei isso, mas não é 'sempre centrado' em tudo, desde a posição é fixa:
.Popup
{
text-align:center;
position: absolute;
bottom: 10%;
left: 27%;
z-index:50;
width: 400px;
background-color: #FFF6BD;
border:2px solid black;
}
Alguma idéia? Graças
Solução
Tente usar este CSS
#centerpoint {
top: 50%;
left: 50%;
position: absolute;
}
#dialog {
position: relative;
width: 600px;
margin-left: -300px;
height: 400px;
margin-top: -200px;
}
<div id="centerpoint">
<div id="dialog"></div>
</div>
#centerpoint deve ser o div recipiente da caixa de diálogo
Nota ??em> que o #centerpoint DIV deve estar dentro do corpo elemento ou elementos dentro que não tem um position: relative; propriedade
Outras dicas
Em comparação com @ resposta de Toma, você pode fazê-lo em um elemento
#theDiv {
position: fixed;
top: 50%;
left: 50%;
width: 200px;
margin-left: -100px;
height: 50px;
margin-top: -25px;
background: yellow;
}
<div id="theDiv" />
Isso permite que você coloque-o em qualquer lugar da página, independentemente de recipientes pai e suas propriedades position
.
CSS3 transformada pode ser usado para evitar largura e margens codificado:
.dialog {
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
Exemplo de utilização: http://tympanus.net/ codrops / 2013/06/25 / bacana-modal-window-/ efeitos
.Popup
{
width:400px;
margin-left:auto;
margin-right:auto;
}
Isso é o alinhamento horizontal; alinhamento vertical é um pouco mais complicado. Apenas o Google em torno de "css centro vertical" ou algo assim.