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

回答