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

Posted

技术标签:

【中文标题】以动态宽度居中固定 div (CSS)【英文标题】:Center fixed div with dynamic width (CSS) 【发布时间】:2013-06-08 19:08:46 【问题描述】:

我有一个包含这个 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 做到这一点是否“更正确”?

【问题讨论】:

@Liam - 我不同意,我认为这个问题本身就是一个彻头彻尾的问题。关于没有固定宽度居中的 div,这些问题没有回答这个问题。 Joshua 所说的,就是让一个 div 居中另一个。 @Liam - 除此之外,您不能在 position: fixed div 上使用 margin: 0 auto。你甚至读过这个问题吗? ^不。我也试过了。 :p @JoshuaM 您的断言并非 100% 正确。看我的回答。 【参考方案1】:

无论内容大小如何,这都能正常工作

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

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

【讨论】:

当心:transform: translate(-50%, -50%); 导致文本模糊(至少在 chrome 上) @Jiří 不是我的情况 对我来说也没有了,也许这是一个错误......但我清楚地记得,在这之后整个容器变得模糊,如果只是轻微......让我们删除这个讨论?【参考方案2】:

在flexbox中使用边距时,这种方法不会限制元素的宽度

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

也用于垂直居中

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

【讨论】:

【参考方案3】:

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

【讨论】:

只要是现代浏览器,这就是这个答案的BEST解决方案!唯一一个类似于 true `float: center' 的功能,因为您可以单击环绕元素,而不必绕着它绕圈子。喜欢这个答案! 小心,不要使用百分比转换来居中文本,因为如果结果值为浮点数,它将被平滑。嘿,男孩,你不想那样,不,你不想。 使用 CSS 变换不仅可以在文本上进行平滑处理;由于转换,我的边框变得很时髦。 在更改屏幕尺寸时可能会提前收缩(取决于分区的大小),从而导致分区边缘出现较大的边框。【参考方案4】:
<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 的容器,具有实际结果?我会试试这个! 虽然我喜欢你的回答的直观性,但我看不出它如何支持 ie6/7。 @MathewBerg,关于 ie6/7 的要点。在这种情况下,您的答案应该是最好的。这有点 OT,但我个人认为开发人员不应该花时间为 是的,但不幸的是,无论我们未来多远,有些公司都需要支持旧版浏览器。继续并根据您的需要接受我的或 laconbass 的答案。 这也不起作用,因为您仍然无法点击“容器”【参考方案5】:

您可以将fixedabsolute 定位元素设置rightleft 居中到0,然后将margin-leftmargin-right 居中到auto,就好像您将@987654331 居中一样@定位元素。

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

请参阅此示例工作 on this fiddle。

【讨论】:

顺便提一下……这并不意外,但它在 IE7 中失败了。它位于此处左起 0px 处。它在 IE 8 中完美运行。 当元素的宽度大于屏幕的宽度时,这不起作用。在这种情况下让它工作会很好。 @andrewb 您可以在rightleft 上应用同样的负边距,至少为value &gt;= witdth / 2,如jsfiddle.net/PvfFy/168 所示,但恕我直言,这不是一种优雅的方法。我已经在 chrome 上测试了它的乐趣,我不知道它是否适用于其余部分 在问题范围之外,这取决于设置元素的宽度,因此如果您有宽度变化或未知的动态内容,那就不好了。撇开居中不谈,我通常会使用 display: inline-block 和没有设置宽度来做到这一点。有没有人有针对这种情况的无 js 解决方案? 问题是动态宽度,这就是问题的全部,你不能忽视它。

以上是关于以动态宽度居中固定 div (CSS)的主要内容,如果未能解决你的问题,请参考以下文章

CSS:居中一个固定的 div

CSS 将没有固定宽度的div居中

CSS 将没有固定宽度的div居中

如何在固定宽度的 div 中居中动态宽度按钮?

CSS - 将 div 固定到顶部中心

如何在固定高度的div内垂直居中动态高度的图像?