CSS：以固定div为中心

Question

我有一个固定定位div的类，它位于视口的底部。我试图使宽度自动化，以便当div改变宽度时，它保持居中。

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

有什么想法吗？我尝试了一个带有text-align：center的容器然后显示：inline，但它产生了疯狂的结果。

Answer 1

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

您可以同时使用left和right来对齐元素（而不是使用宽度）。

如果你想使用宽度，那么你可以这样做：

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

如果要将HTML集中在固定元素中，可以执行以下操作：

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

以下是演示：http://jsfiddle.net/dFXt5/

Answer 2

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

这项工作。