CSS中的居中困扰了很多前端开发者。其中，按钮的居中也是一个常见问题。那么，我们该如何实现按钮的居中呢？下面，我们就来探讨一下。
首先，我们需要知道居中是相对于父元素来说的。所以，要使按钮居中，我们需要先找到它相对的父元素。然后，通过CSS样式来让按钮在其中居中。下面，我们使用一个例子来说明。
在HTML中，我们有一个包含按钮的div元素：
接着，在CSS中，我们定义container类，并设置该类为相对定位（position: relative）。这是因为我们要将按钮设置为绝对定位，并让它相对于container居中。
.container {
position: relative;
}然后，我们设置按钮的样式。将其宽度设置为一定的大小（比如100px），高度设置为自适应（height: auto），背景色设置为任意颜色，边框设置为适当的大小。接着，将按钮设置为绝对定位（position: absolute），并将其上、下、左、右四个方向都设为0。
button {
width: 100px;
height: auto;
background-color: #00bcd4;
border: none;
border-radius: 5px;
color: #ffffff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}最后，我们通过将按钮的上、下、左、右四个方向的值都设为0，并将margin属性设为auto，来让按钮在container中水平和垂直都居中。
综上所述，我们可以通过CSS样式来实现按钮的居中。这里我们需要注意两个点，一个是设置按钮的定位，另一个是通过设置margin让按钮居中。