Центральный фиксированный 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

4

Это работает независимо от размера его содержимого

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

источник: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

— Леонардо
источник

2

остерегайтесь: transform: translate(-50%, -50%);делает текст размытым (по крайней мере, на хроме)

— Иржи