CSS：固定div中心

我有一個固定的定位div留在視圖端口的底部。我試圖使寬度自動，以便當div改變寬度時，它仍然居中。CSS：固定div中心

.box { 
position: fixed; 
width: 80%; 
bottom: 20px; 
left: 50%; 
margin: 0 0 0 -40%; 
max-height: 50%; 
overflow: auto 
}

任何想法？我嘗試了一個容器與文本對齊：中心然後顯示：內聯，但它產生了瘋狂的結果。

2012-01-13 Myforwik

.box { 
    position : fixed; 
    left  : 10%; 
    right  : 10%; 
    bottom  : 20px; 
    max-height : 50%; 
    overflow : auto; 
}

可以使用left和right一起居中元件（而不是使用寬度）。如果要居中你可以做到這一點的固定元素內的HTML

.box { 
    position : fixed; 
    left  : 10%; 
    width  : 80%; 
    bottom  : 20px; 
    max-height : 50%; 
    overflow : auto; 
}

：

.box > div { 
    width  : 50%; 
    min-width : 150px; 
    margin  : 0 auto; 
    text-align : center; 
}

這裏是一個演示

如果你想使用寬度，那麼你可以這樣做： http://jsfiddle.net/dFXt5/

2012-01-13 00:53:03 Jasper

這仍然保持在80％的寬度？我希望寬度根據它包含的數據是動態的 - 例如，如果它只包含一個單詞，那麼這個單詞應該位於一個細小的div的中心，而不是佔據視圖端口80％的div。 – Myforwik 2012-01-13 00:58:45

退房演示。嵌套的div就是這樣做的。如果刪除邊框和背景顏色，則文本將浮在視口中間。 – Jasper 2012-01-13 01:12:39

謝謝。我在IE6上，忘記了>在CSS中不起作用。 – Myforwik 2012-01-13 01:31:20

.centered { position: fixed; top: 50%; left: 50%; margin-top: -[1/2(element-height)]; margin-left: -[1/2(element-width)];}

這項工作。

2013-09-26 17:51:12

回答