Dinamik genişlikte (CSS) ortala sabit div

Bu CSS'ye sahip olacak bir div'im var:

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

Şimdi, bu div'i nasıl ortalayabilirim? Kullanabilirim margin-left: -450px; left: 50%;ancak bu yalnızca ekran> 900 piksel olduğunda çalışacaktır. Bundan sonra (pencere <900 piksel olduğunda), artık ortalanmayacaktır.

Elbette bunu bir tür js ile yapabilirim, ancak bunu CSS ile yapmanın "daha doğru" bir yolu var mı?

Bir ortalayabilmek fixedveya absolutekonumlandırılmış eleman ayarı rightve lefthiç 0ardından ve margin-left& margin-rightiçin autobir merkezleme sanki statickonumlandırılmış elemanı.

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

Bu keman üzerinde çalışırken bu örneğe bakın .

CSS3'ün transformözelliğini güvenle kullanabiliyorsanız işte başka bir yöntem :

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

... veya hem yatay HEM DE dikey merkezleme istiyorsanız:

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

Bir kaba sarmanız gerekir. işte 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;  
}

Bu, içeriğinin boyutuna bakılmaksızın çalışır

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

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