动态宽度居中固定div(CSS)


88

我有一个将具有此CSS的div:

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

现在,如何才能使该div居中?我可以使用,margin-left: -450px; left: 50%;但这仅在屏幕> 900像素时才有效。之后(当窗口<900像素时),它将不再居中。

我当然可以用某种js来做到这一点,但是用CSS做到这一点“更正确”吗?


4
@Liam-我不同意,我认为这个问题本身是一个完全的问题。这些问题并未回答关于没有固定宽度居中的div的问题。
约书亚M

约书亚所说的,是为了使div居中。
gubbfett

7
@Liam-除此之外,您不能margin: 0 autoposition: fixeddiv上使用a 。你甚至读过这个问题吗?
约书亚M

^不。我也尝试过。:p
gubbfett

3
@JoshuaM您的断言不是100%正确。看我的答案。
laconbass

Answers:


221

您可以居中fixedabsolute定位的元素设置rightleft0,然后margin-leftmargin-rightauto,如果你是一个中心static定位的元素。

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

请参见处理此小提琴的示例。


1
只是提一下...这并不是意料之外的,但是它在IE7中失败了。它位于从左起0px处。它确实可以在IE 8中完美运行
。– gubbfett

当元素的宽度大于屏幕的宽度时,此方法将不起作用。
andrewb

1
@andrewb,您可以在上rightleft上至少施加一个相等的负余量value >= witdth / 2,如jsfiddle.net/PvfFy/168所示,但这不是一种优雅的方法恕我直言。我已经在chrome上测试了它的娱乐性,我不知道它是否还能在其他环境下工作
laconbass 2014年

5
在问题范围之外,这取决于设置元素的宽度,因此,如果您的宽度变化或未知的动态内容不是很好。除了居中,我通常使用display来做到这一点:inline-block并且没有设置宽度。有人针对这种情况提供no-js解决方案吗?
enigment

4
问题是动态宽度,这就是整个问题,您不能仅仅忽略它。
吉尔·爱泼斯坦

54

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

...或者如果您想要水平居中和垂直居中:

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

5
只要是用于现代浏览器,这就是此答案的最佳解决方案!唯一一个类似于真正的“ float:center”,因为您可以在包装元素周围单击,而不必在周围绕线。喜欢这个答案!
SpYk3HH 2015年

1
小心,请勿使用百分比转换来使文本居中,因为如果结果值是浮点数,它将被平滑化。嗨,男孩,你不要那样,不,你不要。
gnou 2015年

使用CSS转换可能会导致平滑处理,而不仅仅是文本。转换的结果使我的边界变得时髦。
内森·K

1
更改屏幕尺寸(取决于部门的大小)时,可能会提前收缩,从而导致部门边缘周围的边界较大。
单一实体

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

您需要将其包装在容器中。这是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;  
}

啊,我喜欢你的想法。固定的div只会是具有实际结果的另一个div的容器吗?我会尝试这个!
gubbfett

尽管我喜欢您回答的直观性,但我看不出它如何支持ie6 / 7。
Mathew Berg 2013年

1
@MathewBerg,关于ie6 / 7的要点。在这种情况下,您的答案应该最好。这有点OT,但是我个人认为开发人员不应该花时间修复<= ie7的东西。我认为,实际上,开发人员应该阻止那些浏览器,以迫使具有旧系统的人员和公司进行升级。很难把这个想法卖给付费客户!;)
gubbfett

是的,但是不幸的是,无论我们走到多远,有些公司都需要对旧版浏览器的支持。继续并根据您的需要接受我的或拉康巴斯的回答。
Mathew Berg 2013年

1
这也行不通,因为您仍然无法单击“容器”
SpYk3HH 2015年

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.