[分享]css中对按钮设置居中

在 CSS 中，我们经常需要对按钮进行居中设置。这里我们介绍几种方法。

/* 方法一：使用 text-align 属性 */
button {
  text-align: center;
}

/* 方法二：使用 margin 属性 */
button {
  margin: 0 auto;
}

/* 方法三：使用 flex 布局 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
button {
  /* 可以省略，写上是因为避免按钮文字超出 */
  max-width: 100%;
} 

方法一相对简单，直接使用 text-align: center; 就可以了。但是方法一只适用于单行文字的情况，如果按钮文字过多，会出现多行，无法居中的情况。

方法二使用了 margin: 0 auto;，这种方法适用于按钮宽度已知的情况。margin: 0 auto; 中 0 表示上下边距为 0，auto 表示左右外边距为自动，会根据父元素计算出左右外边距，从而实现居中。

方法三使用了 flex 布局，比较灵活，可以适用于各种情况。justify-content: center; 和 align-items: center; 分别表示水平居中和垂直居中。

<div class="container">
  <button>按钮</button>
</div> 

以上是三种按钮居中的方法，选择哪种方法，可以根据自己的需要和实际情况来决定。