[分享]css中如何设置button居中显示

CSS是前端开发中非常重要的一部分，它可以控制页面的样式，包括文字、图片、边框、背景等等。在Web页面中，我们经常会使用按钮来触发一些特定的动作，但是默认的按钮样式可能不太美观。为了让按钮更好看，我们...

CSS是前端开发中非常重要的一部分，它可以控制页面的样式，包括文字、图片、边框、背景等等。在Web页面中，我们经常会使用按钮来触发一些特定的动作，但是默认的按钮样式可能不太美观。为了让按钮更好看，我们可以使用CSS来设置按钮的样式。

但是，有时候我们还需要让按钮居中显示，让页面更加美观，这该怎么实现呢？下面我们就来看看如何使用CSS设置按钮居中显示。

button {
  display: block; /* 将按钮设置为块级元素 */
  margin: 0 auto; /* 使用margin属性将按钮居中显示 */
} 

如上述代码所示，我们首先将按钮设置为块级元素，这样才能使用margin属性来实现居中显示。然后，我们使用margin属性，并将左右的值都设置为auto，这样就能让按钮在容器中水平居中显示了。

当然，如果你想让按钮在垂直方向上也居中显示，可以将容器的高度设置为和按钮一样，然后使用line-height属性来实现垂直居中显示。

.container {
  height: 50px;
  line-height: 50px;
}

button {
  display: block; /* 将按钮设置为块级元素 */
  margin: 0 auto; /* 使用margin属性将按钮水平居中显示 */
  text-align: center; /* 使用text-align属性将按钮文本居中显示 */
} 

如上述代码所示，我们先将容器的高度设置为和按钮一样，并使用line-height属性将容器的行高和高度都设置为50px，这样就能让按钮在垂直方向上居中显示了。然后，我们还使用了text-align属性将按钮文本居中显示，这样整个按钮就完美地居中显示了。

总结一下，要想让按钮居中显示，我们需要先将按钮设置为块级元素，然后使用margin属性将按钮水平居中，如果需要在垂直方向上也居中，可以将容器的高度设置为和按钮一样，并使用line-height属性将容器的行高和高度都设置为相同的值。最后，使用text-align属性将按钮文本居中显示即可。