我在一个div中有一个span，只需在容器div中设置margin:auto就可以了。

可以对父元素使用display:flex

#parentElement {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }

我认为使用

display: inline-block;

但我不确定浏览器的兼容性。

另一种解决方案是将您的div包装在另一个div中（如果您想保持块行为）：

HTML格式：

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS:

.yourdiv
{
    display: inline;
}

您需要一个具有CSS所称的收缩以适应宽度的块元素，而规范并没有提供一种获得这种东西的好方法。在CSS2中，缩小尺寸并不是一个目标，而是指处理浏览器“必须”凭空获得宽度的情况。这些情况包括：

浮动绝对定位元件内联块元素表元素

当没有指定宽度时。我听说他们想在CSS3中添加你想要的内容。现在，就用上面的一个吧。

不直接曝光该功能的决定可能看起来很奇怪，但有充分的理由。它很贵。缩小到适合意味着至少设置两次格式：在知道元素的宽度之前，不能开始设置元素的格式，并且不能计算整个内容的宽度。此外，人们不需要像想象的那样经常收缩以适应元素。为什么你的桌子周围需要额外的div？也许你只需要表格标题。

您可以使用内联块作为@user473598，但要注意较旧的浏览器。。

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

Mozilla根本不支持内联块，但他们有-moz内联堆栈，这几乎是一样的

内联块显示属性周围的一些跨浏览器：https://css-tricks.com/snippets/css/cross-browser-inline-block/

您可以在以下位置看到一些具有此属性的测试：https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

修订版（如果您有多个孩子，则适用）：您可以使用jQuery（查看JSFiddle链接）

var d= $('div');
var w;


d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});

不要忘记包含jQuery。。。

在此处查看JSfiddle