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 和 display: inline 的容器，但是结果很奇怪。

- Myforwik

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/。

- Jasper

---

那仍然保持宽度为80%吗？我希望宽度根据其包含的数据是动态的 - 例如，如果它只包含一个单词，则该单词应位于微小div的中心，而不是占用80％视口的div。 - Myforwik

查看演示。嵌套的div就是这样做的。如果您删除边框和背景颜色，文本将浮动在视口的中间。 - Jasper

哦，谢谢。我使用IE6，并忘记了CSS中的“>”不起作用。 - Myforwik

Answer 2

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

这个工作。

- Mario Gonzales Flores