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

回答