Question

重复问题的应用，但其他问题的答案似乎都无法解决我的问题。我想在页面中心对齐div。 div必须与其中的内容一样宽。它将用作模态弹出窗口。我在这里设置了一个jsFiddle：http://jsfiddle.net/PDzNj/11/

div将其左侧与中间对齐，而不是div的中心（这是所需的效果）

提前感谢您的任何帮助

Answer 1

一种选择是模拟一个包含<div>周围环境的表格。

<div class='outer'>
    <div class='inner'>
        <div class='thebox'>Contents</div>
    </div>
</div>

然后使用CSS：

div.outer {
    display:table;
    width:100%; //Or however wide you want the container to be
}
div.inner {
    display:table-cell; //This allows the use of vertical-align
    vertical-align:middle;
    text-align:center;
    width:100%;
}
div.thebox { //Your variable-width container
    display:inline-block; //Makes it obey text-aligning.
}

您当然可以根据需要添加高度值。这比CSS更明智，比使它相对，或使用边距更简洁，并且还会减少对周围环境的干扰。

在中心对齐可变宽度div

1 个答案: