在中心对齐宽度可变的div

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的角度来看，这比使它相对或使用边距更整洁，并且对环境的破坏也更少。