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

Question

Центр фиксированный 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 пикселей. После этого (когда окно

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

496 4

html css center

4 ответов:

Comments

Ничего не найдено.

laconbass · Accepted Answer · 2013-06-12 19:13:15

вы можете центрировать a fixed или absolute расположенный элемент right и left до 0, а потом margin-left & margin-right до auto как будто вы центрировали a 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%;
}
смотрите этот пример работы на этой скрипке.

Alan Bellows · Accepted Answer · 2016-03-16 14:42:46

вот еще один метод, если вы можете безопасно использовать 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%);
}

Mathew Berg · Accepted Answer · 2013-06-13 14:25:44

<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;  
}

Leonardo · Accepted Answer · 2018-02-01 12:36:07

это работает независимо от размера его содержание
.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/