Div cố định ở giữa với chiều rộng động (CSS)

Tôi có một div sẽ có CSS ​​này:

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

Bây giờ, làm thế nào tôi có thể đặt div này ở giữa? Tôi có thể sử dụng margin-left: -450px; left: 50%;nhưng điều này sẽ chỉ hoạt động khi màn hình> 900 pixel. Sau đó (khi cửa sổ <900 pixel), nó sẽ không được căn giữa nữa.

Tất nhiên tôi có thể làm điều này với một số loại js, nhưng có cách nào "đúng hơn" khi làm điều này với CSS không?

Bạn có thể căn giữa một fixedhoặc absolutecài đặt phần tử được định vị rightvà leftđến 0, sau đó margin-left& margin-rightđến autonhư thể bạn đang căn giữa một staticphần tử được định vị.

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

Xem ví dụ này hoạt động trên trò chơi này .

Đây là một phương pháp khác nếu bạn có thể sử dụng thuộc tính CSS3 một cách an toàn transform:

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

... hoặc nếu bạn muốn căn giữa theo chiều ngang VÀ chiều dọc:

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

Bạn cần phải bọc nó trong một hộp đựng. đây là 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;  
}

Điều này hoạt động bất kể kích thước của nội dung

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

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