css中怎么让按钮居中

CSS中怎么让按钮居中？这是很多前端初学者都会遇到的问题。下面介绍两种方法。

方法一：margin 属性实现居中

button {
  margin: 0 auto;
  display: block;
} 

上面的代码中，我们通过设置按钮的 margin 属性为 0 auto，让左右两边的间距自动分配，从而实现水平居中。同时，display 属性设置为 block，让按钮变为块级元素，使其占满整行。

方法二：弹性盒子（Flexbox）实现居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
button {
  /* 可以省略 */
  align-self: center;
} 

上面的代码中，我们通过给按钮的父容器设置 display 属性为 flex，并使用 justify-content 和 align-items 属性让其水平和垂直居中。如果有多个子元素，可以通过 align-self 属性让需要居中的按钮单独设置。

以上是两种方法，选择哪种方法主要看具体情况，如需兼容性好可以使用方法一，如果需要更加灵活和方便，则可以选择方法二。