在中心对齐可变宽度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更明智,比使它相对,或使用边距更简洁,并且还会减少对周围环境的干扰.