Как создать CSS для центрированного плавающего диалогового окна подтверждения?
Вопрос
Я ищу способ отобразить диалоговое окно подтверждения, которое всегда находится по центру страницы и плавает над ней.
Пробовал это, но это вообще не "всегда центрировано", так как позиция фиксирована:
.Popup
{
text-align:center;
position: absolute;
bottom: 10%;
left: 27%;
z-index:50;
width: 400px;
background-color: #FFF6BD;
border:2px solid black;
}
Есть какие-нибудь идеи?Спасибо
Решение
Попробуйте использовать этот 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 должен быть контейнером div диалога
Обратите внимание , что #centerpoint DIV должен быть внутри элемента body или внутри элементов, которые не имеют позиция: относительная; свойство
Другие советы
По сравнению с ответом @Toma's, вы можете сделать это для одного элемента
#theDiv {
position: fixed;
top: 50%;
left: 50%;
width: 200px;
margin-left: -100px;
height: 50px;
margin-top: -25px;
background: yellow;
}
<div id="theDiv" />
Это позволяет вам разместить его в любом месте страницы, независимо от родительских контейнеров и их position
свойства.
CSS3-преобразование можно использовать, чтобы избежать жестко заданных ширины и полей:
.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%);
}
Пример использования: http://tympanus.net/ codrops / 2013/06/25 / изящная покадрово-оконные эффекты /
.Popup
{
width:400px;
margin-left:auto;
margin-right:auto;
}
Это горизонтальное выравнивание; вертикальное выравнивание немного сложнее. Просто поищите в Google "css вертикальный центр" или что-то.