中心CSS按钮与宽度自动

我想要一个宽度为自动的按钮和

显示：块。此按钮应居中放置
边距：0 auto
。但如果我把所有这些都放在一起，那就行不通了

我做错了什么

代码：


自闭症
我是一个示例内容，我应该在按钮上方。我想要一个自动宽度和居中
.btn{
颜色：黑色；
字体大小：14px；
线高：14px；
文本对齐：居中；
字体大小：粗体；
保证金：0自动；
高度：14px；
显示：块；
光标：指针；
背景色：红色；
填充：15px；
文字装饰：无；
}
地狱世界
您可以使用
内联块
而不是
块
：

body {
    text-align:center;
}
.btn{
   display:inline-block;
}

演示

另一个选项是使用
显示：表格
，通过此选项，页边距自动可以工作：

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

演示如果将其设置为
宽度：auto
，则该元素将填充整个屏幕。所以它是居中的，但你无法分辨，因为它占据了整个屏幕。只需将
width:auto
更改为固定宽度，如
50px
或
30%
，它就会正确居中

如果您有可变内容，那么去掉
高度：15px
，它就会工作。使用
宽度：65%
时，它看起来也会更好一些
 这里的实例：我不知道问题出在哪里？@cloudcoder2000您的示例是finde，但我想要一个宽度自动，而不是50px。@Ishan Jain，您为什么发布此代码？这就是我贴的东西。我正在搜索一个解决方案，没有固定的with，没有添加另一个元素和display:block@LJ-C你是对的；使用
50px
时，文本甚至无法放入框中！然而，这与问题无关，因为它仍然居中…嗨，但我希望有一个可变的内容，所以它不是一个解决方案，我正在搜索一个解决方案，没有固定的with，没有添加另一个元素和显示：block！（因此按钮出现在新行中）@julesdude你认为
display:block
是出现在新行中的唯一方式吗？@cloudcoder2000 display:table解决了我的问题。我不想有任何宽度，无论是百分比还是像素。只有一行和按钮可以根据其内部的两个或三个单词更改宽度。这是可行的，除非文档中的其他元素可能受到
正文
在
文本对齐：居中
的影响。您可以将相同的样式应用于容器而不是主体，但这只会增加额外的、不必要的复杂性。但最好不要像您的答案中那样删除
width:auto
）哦。。是的，在固定px中做宽度是有问题的。你说得对。@julesdude这是唯一可以将内容居中并使用两个选项之一自动更改显示属性宽度的方法。@julesdude你可以使用
内联块和伪选择器
：after和：before
.btn {
   display:table;
   margin: 0 auto;
}