带有动态宽度(CSS)的中心固定div

I have a div that will have this CSS:

我有一个div会有这个CSS:

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

Now, how can i make this div centered? I can use margin-left: -450px; left: 50%; but this will only work when the screen is > 900 pixels. After that (when the window is < 900 pixels), it will no longer be centered.

现在，如何使这个div居中?我可以使用margin-left: -450px;左:50%;但这只在屏幕为>900像素时有效。之后(当窗口小于900像素时)，它将不再居中。

I can of course do this with some kind of js, but is there a "more correct" of doing this with CSS?

我当然可以用一些js来做，但是用CSS做这个有“更正确”的吗?

4 个解决方案

#1

You can center a fixed or absolute positioned element setting right and left to 0, and then margin-left & margin-right to auto as if you were centering a static positioned element.

你可以将一个固定或绝对定位的元素设置为0，然后向右移动，就像你对静态定位元素的定心一样。

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

See this example working on this fiddle.

#2

Here's another method if you can safely use CSS3's transform property:

如果您可以安全地使用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%);
}

...or if you want both horizontal AND vertical centering:

…或者如果你想要水平和垂直的定心:

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

#3

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

You'd need to wrap it in a container. here's the css

你需要把它装在一个容器里。这是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;  
}

#4

This works regardless of the size of its contents

不管内容的大小，它都可以工作

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

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