Css 在中心对齐可变宽度的div

一个重复问题的答案，但其他问题的答案似乎都不能解决我的问题。我想在页面中央对齐一个

div

。

div

的宽度必须与其中的内容相同。它将用作模式弹出窗口。我在这里设置了一个JSFIDLE：

<代码> div <代码>将其左侧对齐在“中间”而不是“代码> div < /代码>的中心（这是所希望的效果）

---

提前感谢您的帮助

一个选项是使用

的环境模拟表格

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

---

当然，您可以根据需要添加高度值。这比使其相对或使用边距更整洁、更明智，而且对周围环境的破坏也更小。

一个选项是使用

的周围环境模拟表格

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

当然，您可以根据需要添加高度值。这比相对设置或使用边距更整洁、更明智，而且对周围环境的干扰也更小。
您是否尝试过将CSS样式设置为左边距：自动和右边距：自动？这将在父元素的中心放置一个固定宽度的div:）@Stephan Fandler-这对可变宽度div不起作用，除非将其设置为宽度0%，并且其中的内容迫使其变大，但这可能会干扰其他样式。您是否尝试过将css样式设置为左边距：自动和右边距：自动？这会将固定宽度的div放置在父元素的中心：）@Stephan Fandler-这对可变宽度div不起作用，除非将其作为宽度0%，并且其中的内容迫使其变大，但这会干扰其他样式。请注意，如果不需要垂直居中，这样就不需要
display:table
或
display:table cell
。对于水平居中，以上答案中的
text align:center
和
display:inline block
就足够了。请注意，如果不需要垂直居中，则不需要
display:table
或
display:table cell
。对于水平居中，以上答案中的
text align:center
和
display:inline block
就足够了。