css - 在中心对齐可变宽度的 div

Question

申请重复问题，但其他问题的答案似乎都无法解决我的问题。我想div在页面中心对齐 a 。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 明智，并且对周围环境的破坏也更少。