CSS：居中一个固定的 div

Posted 2023-03-05

【中文标题】CSS：居中一个固定的 div

【英文标题】：CSS: center a fixed div

【发布时间】：2012-02-09 07:11:36

【问题描述】：

我有一个固定位置 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 的容器，但它产生了疯狂的结果。

【参考方案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/

【讨论】：

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

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

哦，谢谢。我在 IE6 上忘记了 CSS 中的 > 不起作用。

【参考方案2】：

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

这项工作。