温馨提示：这篇文章已超过287天没有更新，请注意相关的内容是否还可用！
按钮在div内左右居中显示可以通过以下步骤实现。
我们需要确保div元素的宽度和高度已经设置。如果没有设置宽度和高度，按钮将无法居中显示。接着，我们可以使用CSS的flex布局来实现按钮的左右居中。
在div元素的样式中，我们可以将display属性设置为flex，这将使其成为一个flex容器。然后，我们可以使用justify-content属性来设置按钮在水平方向上的对齐方式。通过将justify-content属性设置为center，按钮将在div中水平居中显示。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
width: 400px;
height: 200px;
border: 1px solid black;
}
.button {
width: 100px;
height: 50px;
background-color: blue;
color: white;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="bd70-31f6-3f2e-1a7c container">
<button class="31f6-3f2e-1a7c-3b8d button">按钮</button>
</div>
</body>
</html>
在上面的示例代码中，我们创建了一个div元素，类名为container，宽度为400px，高度为200px，并设置了边框样式。在div元素内部，我们创建了一个按钮元素，类名为button，宽度为100px，高度为50px，并设置了背景颜色、文字颜色、文本对齐方式和行高。
通过将div元素的display属性设置为flex，并在其样式中使用justify-content属性设置为center，按钮将在div内水平居中显示。
这种方法不仅适用于按钮，还适用于其他元素的水平居中显示，例如文本、图像等。flex布局还可以通过设置align-items属性实现元素在垂直方向上的居中显示。
通过使用CSS的flex布局，我们可以轻松实现按钮在div内左右居中显示。这种方法简单、灵活，并且适用于各种场景。
