按钮在div中居中显示

按钮在div中居中显示的方法有多种，下面我将介绍其中的一种常用方法。

我们可以使用flex布局来实现按钮在div中居中显示。flex布局是一种强大的布局模式，可以轻松实现元素的水平和垂直居中。

示例代码如下：

HTML代码：

<div class="a253-b193-0fad-dc9c container">
  <button class="b193-0fad-dc9c-9db2 centered-button">按钮</button>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
.centered-button {
  padding: 10px 20px;
  background-color: #f2f2f2;
  border: none;
  border-radius: 5px;
}

在上面的示例代码中，我们首先创建了一个div容器，并在其中放置了一个按钮。然后，我们给容器设置了display: flex属性，这样容器内的元素就会使用flex布局。

接着，我们使用justify-content: center和align-items: center属性来分别实现按钮的水平和垂直居中。justify-content: center将按钮在水平方向上居中显示，而align-items: center将按钮在垂直方向上居中显示。

我们给按钮添加了一些样式，例如设置了padding、背景色、边框等。

使用上述代码，按钮就会在div容器中居中显示了。

除了使用flex布局，还可以使用其他方法来实现按钮在div中居中显示，例如使用绝对定位和transform属性。这种方法可以将按钮相对于父元素进行定位，并使用transform属性来实现居中。

示例代码如下：

HTML代码：

<div class="b99b-5a3e-6b37-fbd6 container">
  <button class="5a3e-6b37-fbd6-a19f centered-button">按钮</button>
</div>

CSS代码：

.container {
  position: relative;
  height: 200px;
}
.centered-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background-color: #f2f2f2;
  border: none;
  border-radius: 5px;
}

在上面的示例代码中，我们首先给容器设置了position: relative属性，这样按钮就可以相对于容器进行定位。

然后，我们给按钮添加了position: absolute属性，并使用top: 50%和left: 50%将按钮定位到容器的中心位置。接着，我们使用transform: translate(-50%, -50%)将按钮在水平和垂直方向上向左上方平移50%，从而实现居中。

我们给按钮添加了一些样式，例如设置了padding、背景色、边框等。

使用上述代码，按钮也会在div容器中居中显示。

需要注意的是，以上示例代码中的容器高度是固定的，如果容器高度是根据内容自适应的，那么需要根据实际情况进行调整。以上示例代码中的按钮样式仅供参考，你可以根据自己的需求进行调整。

总结一下，按钮在div中居中显示可以使用flex布局或者绝对定位和transform属性来实现。使用flex布局时，设置容器的display: flex、justify-content: center和align-items: center属性，可以实现按钮的水平和垂直居中。使用绝对定位和transform属性时，设置按钮的position: absolute、top: 50%、left: 50%和transform: translate(-50%, -50%)属性，可以将按钮相对于父元素进行定位并实现居中。以上方法都是常用的实现按钮居中显示的方式，可以根据实际情况选择适合的方法来使用。