Wyśrodkowany element div z dynamiczną szerokością (CSS)

Mam div, który będzie miał ten CSS:

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

Jak mogę wyśrodkować ten div? Mogę użyć, margin-left: -450px; left: 50%;ale będzie to działać tylko wtedy, gdy ekran ma> 900 pikseli. Po tym (gdy okno ma <900 pikseli), nie będzie już wyśrodkowane.

Mogę to oczywiście zrobić za pomocą jakiegoś js, ale czy jest bardziej poprawne zrobienie tego za pomocą CSS?

Możesz wyśrodkować fixedlub absoluteustawienie elementu pozycjonowanego righti leftdo 0, a następnie margin-left& margin-rightdo autotak, jakbyś wyśrodkowował staticpozycjonowany element.

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

Zobacz przykład pracy nad tym skrzypcem .

Oto inna metoda, jeśli możesz bezpiecznie używać transformwłaściwości 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%);
}

... lub jeśli chcesz wyśrodkować zarówno w poziomie, jak iw pionie:

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

Musiałbyś owinąć go w pojemnik. oto 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;  
}

Działa to niezależnie od rozmiaru zawartości

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

źródło: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/