让CSS元素自动调整到内容宽度，同时居中

我有一个CSS元素，它周围有一个边框，可以有一个或多个框，所以整个div的宽度会根据其中有多少框而变化。但是，我希望整个div都集中在屏幕上

通常，为了使事情集中，我只使用：

margin-left: auto;
margin-right: auto;

但是，这一次，我要么浮动元素，要么使其成为内联块，这样div的大小将根据内容调整大小，如果我这样做，左边距和右边距自动将不起作用，它总是停留在屏幕的左侧

目前我有：

#boxContainer {
    display:inline-block;
    clear:both;
    border:thick dotted #060;
    margin: 0px auto 10px auto;
}

我还尝试了使用

float:left

而不是

display:inline block

---

有没有人知道一种好方法，既可以将div居中，又可以同时将其调整为内容大小？任何帮助都将不胜感激。

您是否尝试过将其保留在内联块中，并将其放入设置为

文本对齐：居中的块级元素中

例如

HTML
看起来就像你描述的那样：不幸的是，这不能仅仅通过CSS实现，我不认为。一旦知道了
div的宽度（即在添加了框之后），您就可以使用JavaScript将其居中，例如：

$(document).ready(function() {
    var itemWidth = $('#boxContainer').width();
    var availWidth = $(screen).width();
    var difference = availWidth - itemWidth;
    $('#boxContainer').css('margin: 0 ' + Math.round(difference / 2) + 'px');
});

例如，在这里共享一些代码[.它比以前更容易理解，而且可以更快地得到一些帮助。对不起，我的英语不好。我们有一个只使用CSS的解决方案，尽管我猜使用
display:inline block
在早期版本的IE中可能会有问题。是的，不幸的是，在父容器上使用
text align:center
在earl中不起作用IE的更高版本：-（嘿，非常感谢你的提示，这非常有效！像这样使用文本对齐非常棘手…在IE和chrome中都有效。再次感谢！@Anthony:hurrah！很高兴我们找到了解决方案，特别是对于像你这样措辞巧妙的问题（因为这样其他有同样问题的人会更容易找到）.如果您愿意接受我的答案（单击旁边的勾号），其他人会更容易找到，我将获得15分。
#boxContainerContainer {
    background: #fdd;
    text-align: center;
}

#boxContainer {
    display:inline-block;
    border:thick dotted #060;
    margin: 0px auto 10px auto;
    text-align: left;
}

#box1,
#box2,
#box3 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;
}

$(document).ready(function() {
    var itemWidth = $('#boxContainer').width();
    var availWidth = $(screen).width();
    var difference = availWidth - itemWidth;
    $('#boxContainer').css('margin: 0 ' + Math.round(difference / 2) + 'px');
});