CSS：居中位置：固定答案

【问题标题】：CSS: Centering position: fixedCSS：居中位置：固定
【发布时间】：2016-09-21 05:15:06
【问题描述】：

我遇到了一个（水平）居中固定位置元素的解决方案，如下所示：

element {
    width: 200px;

    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
}

（其中element显然是要居中的元素）。

问题是这实际上是如何工作的？这是记录在案的行为吗？

很遗憾你不能垂直做同样的事情。

谢谢

【问题讨论】：

【解决方案1】：

您必须设置高度以使其垂直居中，并且top 和bottom 必须为0 也将边距更改为此margin:auto

试试这个：

element {
    width: 200px;
    height:10px;
    position: fixed;
    left: 0;
    right: 0;
    top:0;
    bottom:0;
    margin:auto;
}

【讨论】：

上面的问题是，至少在 Firefox 上，如果没有指定高度，元素会从上到下拉伸（这可能很有用），或者如果高度保持在顶部被指定。 margin: auto 只能水平工作。
@Manngo 先试试看，看看这个jsfiddle.net/brt2ngz6，如果你增加高度，它会居中。
@winresh24 不，你是对的。我自己的测试失败了，因为我正在与其他 CSS 争夺 margin。这是两个惊喜：margin: auto 通常不会垂直工作，我仍然看不到将相反位置设置为 0 是如何达到效果的。这是在哪里记录的？一旦我发现，我可以看到哪些浏览器支持这种行为。谢谢你的小提琴。
@Manngo 据我所知，它支持所有浏览器。我不记得它是在哪里记录的。如果这个解决了您的问题，您可以接受答案。干杯
@Manngo - 记录在 the CSS 2.x spec 中。特别是，参见等式'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block 。请注意，这是描述绝对定位的元素。但是fixed positioning is a subcategory of absolute positioning

【解决方案2】：

由于这条线，元素水平居中（边距：0 自动）。

0 定义上边距和下边距。 Auto = 左右自动边距。这是使元素保持居中的关键。

垂直是不同的，因为其他元素可以放置在元素的顶部和下方。

【讨论】：

【解决方案3】：

position: fixed 或 position: absolute 将元件从正常流动中移除，并且元件从其容器或主体获取其轴承。
top:0、bottom: 0、right: 0 和 left: 0 有效地将元素拉伸到其容器。 对于绝对和固定位置，它们还定义了一个边界框。.
设置height 和width 会限制框的大小，因此它不会被拉伸，但是：
margin 是根据上面的边界框计算得出的。特别是，margin: auto 导致居中。

看起来，虽然垂直的margin: auto 对普通元素没有影响（它们被设置为 0），但它们适用于固定和绝对元素。

请注意，上面的解释包括固定定位，本文没有重点介绍。

也感谢@winresh24 指出垂直居中。这有助于我找到解决方案。

【讨论】：