CSS：定中心位置是：固定

我跨溶液来抓（水平）为中心的固定位置元素如下：CSS：定中心位置是：固定

element { 
    width: 200px; 

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

（其中元件是明显的元件为中心）。

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

这是一个耻辱，你不能垂直做同样的事情。

谢谢

2016-05-24 Manngo

只是增加了一个高度，只是'margin：auto'它会正常工作'top：0'' bottom：0' – winresh24

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

0定义了顶部和底部边距。 Auto =左侧和右侧的自动边距。这是使元素保持中心地位的关键。

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

2016-05-24 06:37:09 BigRedDog

是的，但是如果'position'是'fixed'，通常不起作用。我的问题涉及固定元素。 – Manngo

您必须设置高度，使其垂直中心和top和bottom必须为0，也更改页边距这个margin:auto

试试这个：

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

2016-05-24 06:39:55 winresh24

上面的问题是，至少在Firefox上，如果未指定高度，则该元素从顶部延伸到底部（这可能很有用），或者如果指定了高度，则元素保留在顶部。 'margin：auto'只能水平工作。 – Manngo

@Manngo - [Works for me]（https://jsfiddle.net/9tmb7vj5/） – Alohci

@Manngo先试一下，看看这个https://jsfiddle.net/brt2ngz6/它会居中，如果你添加高度。 – winresh24

好的，我想我有一个答案，这要归功于Smashing Magazine: Absolute Horizontal and Vertical Centering in CSS。这里是简短的版本：

position: fixed或position: absolute去除正常流动的元素，该元素从它的容器或身体得到它的轴承。
top:0,bottom: 0,right: 0和left: 0将元件有效地拉伸到其容器。 对于绝对的&固定位置，它们还定义了一个边界框。。
设置height和width限制框的大小，因此它不被拉伸，但：
的margin从上方边界框来计算。特别是，margin: auto导致居中。

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

请注意，上面的解释包括固定位置，本文不重点关注。

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

2016-05-24 11:48:02 Manngo

回答