Html 如何在使用CSS创建按钮时将其居中

我正在使用基本的HTML、CSS和Javascript创建一个简单的web应用程序。当我尝试文本对齐：居中和其他CSS元素使按钮居中时，我仍然遇到问题。。我还尝试将文本居中放置在方框中心，但由于未知原因无法工作。到目前为止，我已经使用左边距和右边距来调整按钮，但我愿意知道如何在不经历所有这些麻烦的情况下将其居中

.image{
显示：网格；
网格模板列：50%50%；
网格模板行：50%50%；
边缘顶端：40px；
左边距：50像素；
}
.图像img{
光标：指针；
}
.图像img：悬停{
边框：实心2px#1e88e5；
边界半径：2px；
}
.image#母亲img：悬停{
边框：实心2px#1e88e5；
边界半径：2px；
}
.图像img{
宽度：100px；
高度：100px；
文本对齐：居中；
填充：10px；
左缘：30%；
}
.按钮{
宽度：80px；
高度：40px；
文本对齐：居中；
保证金：自动；
显示器：flex；
填充顶部：8px；
垫底：8px；
背景色：rgb（43,43,219）；
光标：指针；
边界半径：2px；
}
.按钮：悬停{
背景色：#2424；
}
.按钮：激活{
背景色：#121212；
}
.按钮>跨度{
颜色：#eeeeee；
文本对齐：居中；
}

好警察，坏警察
.查看图像img{
左边距：90像素；
}
证实
其他

在css中创建完美中心对齐的最快、最简单的方法是使用flexbox

一般的模式是，给需要其子元素的父元素一个

display:flex，a
调整内容：中心，和a
对齐项目：居中

对于您的代码，去掉所有的
文本对齐
。然后在
.button
类中添加
内容：中心，该类已经是
显示：flex
和
对齐项目：居中

包含文本的span元素是按钮的子元素，因此它现在将居中。span元素本身不需要任何CSS属性来帮助它居中

.button {
  width: 80px;
  height: 40px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: rgb(43, 43, 219);  
  cursor: pointer;
  border-radius: 2px;
}

你能检查一下下面的代码吗？希望它对你有用。您只需将
按钮
代码添加到
.image
类之外，然后将
边距
添加到
按钮
中即可

.button { 
  margin: 10px auto 0px;
}

请参阅此链接：
非常好！工作很好，非常感谢。