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

Posted 2023-03-05

【中文标题】以动态宽度居中固定 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】：

您可以将fixed 或absolute 定位元素设置right 和left 居中到0，然后将margin-left 和margin-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 您可以在right 和left 上应用同样的负边距，至少为value >= witdth / 2，如jsfiddle.net/PvfFy/168 所示，但恕我直言，这不是一种优雅的方法。我已经在 chrome 上测试了它的乐趣，我不知道它是否适用于其余部分

在问题范围之外，这取决于设置元素的宽度，因此如果您有宽度变化或未知的动态内容，那就不好了。撇开居中不谈，我通常会使用 display: inline-block 和没有设置宽度来做到这一点。有没有人有针对这种情况的无 js 解决方案？

问题是动态宽度，这就是问题的全部，你不能忽视它。

【参考方案2】：

如果您可以安全地使用 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 变换不仅可以在文本上进行平滑处理；由于转型，我得到了时髦的边框。

在更改屏幕尺寸（取决于分区大小）时可能会提前收缩，从而导致分区边缘出现大边框。

【参考方案3】：

<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 的答案。

这也不起作用，因为您仍然无法点击“容器”

【参考方案4】：

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

.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ří 不是我的情况

对我来说也没有了，也许这是一个错误......但我清楚地记得，在这之后整个容器变得模糊，如果只是轻微......让我们删除这个讨论？

【参考方案5】：

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

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

也用于垂直居中

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