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

У мене є div, який матиме такий CSS:

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

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

Звичайно, я можу зробити це за допомогою якогось js, але чи є "правильніше" робити це за допомогою CSS?

Ви можете відцентрувати параметр 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%;
}

Дивіться цей приклад роботи над цією скрипкою .

Ось ще один метод, якщо ви можете безпечно використовувати 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%);
}

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

Це працює незалежно від розміру його вмісту

.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/