Центр фиксированного div с динамической шириной (CSS)

У меня есть div, который будет иметь этот CSS:

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

Теперь, как я могу сделать это div центрированным? Я могу использовать margin-left: -450px; left: 50%;, но это будет работать только тогда, когда экран будет > 900 пикселей. После этого (когда окно будет < 900 пикселей), оно больше не будет центрировано.

Я могу, конечно, сделать это с помощью какого-то js, но есть ли "правильнее" делать это с помощью CSS?

Ответы

Ответ 1

Вы можете установить параметр fixed или absolute расположенных элементов right и left на 0, а затем margin-left и margin-right на auto, как если бы вы центрировали static позиционированный элемент.

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

См. этот пример: на этой скрипте.

Ответ 2

Вот еще один способ, если вы можете безопасно использовать свойство CSS3 transform:

.fixed-horizontal-center
{
    position: fixed;
    top: 100px; /* or whatever top you need */
    left: 50%;
    width: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

... или если вы хотите горизонтальное и вертикальное центрирование:

.fixed-center
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

Ответ 3

<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>

Вам нужно будет обернуть его в контейнер. здесь css

#container{
    position: fixed;
    top: 100px;
    width: 100%;
    text-align: center;
}
#some_kind_of_popup{
    display:inline-block;
    width: 90%;
    max-width: 900px;  
    min-height: 300px;  
}