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

89

У меня есть 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?

css html center Gubbfett
источник
4
@Liam - я не согласен, я думаю, что это вопрос само по себе. Эти вопросы не дают ответа на этот вопрос о том, что у div нет фиксированной ширины по центру.
Джошуа М.
То, что сказал Джошуа, предназначено для центрирования одного div в другом.
gubbfett
7
@Liam - Кроме того, вы не можете использовать a margin: 0 autoв position: fixeddiv. Вы хоть вопрос читали?
Джошуа М.
^ нет. Я тоже пробовал это. : p
gubbfett
3
@JoshuaM Ваше утверждение не на 100% верно. Смотрите мой ответ.
laconbass

Ответы:

222

Вы можете центрировать 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%;
}

См. Этот пример, работающий на этой скрипке .

лаконичный бас
источник
1
Просто упомяну ... Это не так уж и неожиданно, но это не работает в IE7. Он расположен на 0 пикселей слева. Как всегда, он отлично работает в IE 8.
gubbfett
Это не работает, когда ширина элемента больше ширины экрана ... было бы неплохо, если бы он работал в этой ситуации.
andrewb
1
@andrewb, вы можете применить одинаково отрицательный запас как для, так rightи leftдля как минимум a value >= witdth / 2, как видно на jsfiddle.net/PvfFy/168 , но это не элегантный подход IMHO. Я для удовольствия тестировал на хроме, не знаю, будет ли работать на остальном
laconbass
5
Вне рамок вопроса это зависит от настройки ширины элемента, поэтому не очень хорошо, если у вас есть динамический контент, ширина которого варьируется или неизвестна. Не говоря уже о центрировании, я бы обычно делал это с помощью display: inline-block и без установленной ширины. У кого-нибудь есть решение no-js на этот случай?
enigment
4
Вопрос говорит о динамической ширине , вот и вся проблема, ее нельзя просто игнорировать.
Гил Эпштейн
54

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

.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%);
}
Алан Беллоуз
источник
5
Если это для современного браузера, это ЛУЧШЕЕ решение для этого ответа! Единственное, что похоже на настоящий `float: center ', в том, что вы можете щелкать по оборачивающему элементу и не застревать, пытаясь обойти его. Люблю этот ответ!
SpYk3HH 07
1
Осторожно, не используйте перевод в процентах для центрирования текста, так как он будет сглажен, если результирующее значение будет плавающим. Хо, мальчик, ты этого не хочешь, нет, не хочешь.
gnou
Использование преобразований CSS может привести к сглаживанию не только текста; В результате трансформации у меня появляются забавные границы.
Nathan K
1
Возможность преждевременного сжатия при изменении размера экрана (в зависимости от размера раздела), что приводит к появлению больших границ по краю раздела.
Single Entity
7 
<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;  
}
Мэтью Берг
источник
Ах, мне нравится твое мышление. Фиксированный div будет только контейнером для другого div с фактическим результатом? Я попробую это!
gubbfett
Хотя мне нравится интуитивность вашего ответа, я не понимаю, как он позволяет поддерживать ie6 / 7.
Мэтью Берг,
1
@MathewBerg, хорошее замечание по поводу IE6 / 7. В этом случае ваш ответ должен работать лучше всего. Это немного ОТ, но лично я считаю, что разработчикам не следует тратить время на исправление вещей для <= ie7. Я думаю, что на самом деле разработчики должны блокировать эти браузеры, чтобы заставить людей и компании со старыми системами обновиться. Как никогда сложно продать эту идею платежеспособному покупателю! ;)
gubbfett
Да, но, к сожалению, некоторым компаниям требуется поддержка устаревших браузеров независимо от того, как далеко мы зайдем в будущее. Примите мой или лаконичный ответ, в зависимости от ваших потребностей.
Мэтью Берг
1
это также не работает, так как вы все еще не можете щелкнуть по «контейнеру»
SpYk3HH