Feste Mitte mit dynamischer Breite (CSS) zentrieren

Ich habe eine Div, die dieses CSS haben wird:

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

Wie kann ich dieses Div zentrieren? Ich kann verwenden, margin-left: -450px; left: 50%;aber dies funktioniert nur, wenn der Bildschirm> 900 Pixel ist. Danach (wenn das Fenster <900 Pixel ist) wird es nicht mehr zentriert.

Ich kann das natürlich mit einer Art js machen, aber gibt es eine "korrektere" Möglichkeit, dies mit CSS zu tun?

Sie können eine fixedoder absolutepositionierte Elementeinstellung rightund leftbis 0und dann margin-left& margin-rightbis autozentrieren , als ob Sie ein staticpositioniertes Element zentrieren würden .

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

Sehen Sie sich dieses Beispiel an, das an dieser Geige arbeitet .

Hier ist eine andere Methode, wenn Sie die transformEigenschaft von CSS3 sicher verwenden können :

.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%);
}

... oder wenn Sie sowohl horizontale als auch vertikale Zentrierung wünschen:

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

Sie müssten es in einen Behälter wickeln. Hier ist die 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;  
}

Dies funktioniert unabhängig von der Größe des Inhalts

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

Quelle: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/