CSS：居中位置：固定

Question

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

element {
    width: 200px;

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

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

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

遗憾的是，你不能垂直地做同样的事情。

由于

Answer 1

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

试试这个：

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

Answer 2

由于此行（边距：0自动），元素水平居中。

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

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

您可以使用此页面作为参考 - ＆gt; https://css-tricks.com/centering-css-complete-guide/

Mozilla开发者网络的参考 - ＆gt; https://developer.mozilla.org/en/docs/Web/CSS/margin

Answer 3

好的，我想我有答案，感谢Smashing Magazine: Absolute Horizontal and Vertical Centering in CSS。以下是简要版本：

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

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

请注意，上面的解释包括固定定位，文章没有关注。

还要感谢@ winresh24，他指出了垂直居中。这有助于我找到解决方案。