CSS:居中位置:固定

时间:2016-05-24 06:32:24

标签: css position center fixed

我遇到了一个解决方案,用于(水平)将固定位置元素居中,如下所示:

element {
    width: 200px;

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

(其中元素显然是要居中的元素。)

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

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

由于

3 个答案:

答案 0 :(得分:1)

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

试试这个:

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

答案 1 :(得分:0)

由于此行(边距:0自动),元素水平居中。

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

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

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

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

答案 2 :(得分:0)

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

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

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

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

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