Как сделать мое всплывающее окно мертвой точкой независимо от его ширины

Question

У меня есть всплывающее окно для моего сайта в стиле CSS, и я не могу понять, как его центрировать. Все нормальные способы не работают, потому что мне нужно, чтобы он был отцентрирован независимо от его ширины.

Вот CSS для фона и всплывающего окна:

    .filterbox {
     background-color: #000000;
     display: none;
     height: 100%;
     left: 0%;
     opacity: 0.5;
     position: absolute;
     top: 0%;
     width: 100%;
     z-index: 10;
}

.floatbox {
     background-color: white;
     border: 2px solid #FD6907;
     display: none;
     margin:0 auto;
     min-height: 200px;
     min-width:500px;
     overflow: hidden;
     padding: 10px;
     position: absolute;
     top: 30px;
     left:30%;
     z-index: 11;
     -moz-border-radius: 15px; 
     border-radius: 15px;
     -webkit-border-radius:15px;
}

И вот div, который идет внутри этого всплывающего окна.

#boxcontent {
 height: auto;
 width:100%;
 left: 0pt;
 margin-bottom: 50px;
 min-height: 150px;
 padding: 10px;
}

В настоящее время он абсолютно позиционирован, однако я хотел бы знать более совместимый способ, при котором всплывающее окно будет центрировано, независимо от того, что это за окно.

Заранее спасибо.

Answer 1

.floatbox{
    width:600px;
    margin-left:auto;
    margin-right:auto;
}

Или какую бы ширину вы ни выбрали

Answer 2

Я думаю, вам нужно JS, чтобы разместить всплывающее окно...