带有显示的div：行内边距0自动不居中

<div style="display: inline-block; margin: 0 auto;">
    <input id="abc" type="button" value="button" />
</div>

我尝试使用上面的代码设置宽度等于其内容的宽度，然后将其居中放置空白：0 auto;

但这不适用于任何浏览器。有什么建议吗？

顺便说一句，当我设置width属性时，它可以正常工作。

<div style="width: 10em; margin: 0 auto;">
    <input id="abc" type="button" value="button" />
</div>

显示：表；也会将其定位在中心：

CSS：

  .button{
    display: table;
    margin: 0 auto;
    }

HTML：

<div class="button">
<input id="abc" type="button" value="button" />
< /div>

注意：使用内联样式是一种不好的做法。

由于您要求DIV为inline-block，因此text-align: center;可以找到答案。

<div style="text-align: center;">
<div style="display: inline-block; text-align: left;">
    <input id="abc" type="button" value="button" />
</div>
</div>

尝试

body {text-align: center;}