Centrer un div fixe avec une largeur dynamique (CSS)

Question

J'ai un div qui aura ce CSS :

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

Maintenant, comment puis-je faire en sorte que cette division soit centrée ? Je peux utiliser margin-left: -450px; left: 50%; mais cela ne fonctionne que lorsque l'écran est > 900 pixels. Après cela (lorsque la fenêtre est < 900 pixels), elle ne sera plus centrée.

Je peux bien sûr faire cela avec une sorte de js, mais y a-t-il une façon "plus correcte" de faire cela avec CSS ?

Answer 1

Vous pouvez centrer un fixed ou absolute réglage de l'élément positionné right y left a 0 et ensuite margin-left & margin-right a auto comme si tu centrais un static élément positionné.

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

Voir cet exemple de fonctionnement sur ce violon .

Answer 2

Voici une autre méthode, si vous pouvez utiliser en toute sécurité la méthode CSS3. transform propriété :

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

...ou si vous voulez un centrage horizontal ET vertical :

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

Answer 3

Cela fonctionne quelle que soit la taille de son contenu

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

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

Answer 4

<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>

Vous devez l'intégrer dans un conteneur. Voici le code 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;  
}

Answer 5

Cette approche ne limitera pas la largeur de l'élément lors de l'utilisation des marges en flexbox.

top: 0; left: 0;
transform: translate(calc(50vw - 50%));

Aussi pour le centrer verticalement

top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));