html 按钮 javascript【HTML 按钮 居中：代码示例】

HTML 按钮可以通过CSS样式来实现居中显示。我们可以使用CSS的`text-align`属性来实现按钮的水平居中。将父元素的`text-align`属性设置为`center`，按钮就会在父元素中水平居中显示。

示例代码如下：

<style>
  .container {
    text-align: center;
  }
</style>
<div class="afe4-e20c-2116-bed5 container">
  <button>按钮</button>
</div>

上述代码中，我们创建了一个名为`.container`的CSS类，将其`text-align`属性设置为`center`。然后，我们在`.container`元素内部放置了一个按钮元素`<button>`。由于按钮元素位于`.container`元素内部，并且`.container`元素的`text-align`属性设置为`center`，按钮就会在`.container`元素中水平居中显示。

除了水平居中，我们还可以使用CSS的`vertical-align`属性来实现按钮的垂直居中。将按钮的`vertical-align`属性设置为`middle`，按钮就会在父元素中垂直居中显示。

示例代码如下：

<style>
  .container {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
<div class="2116-bed5-c708-a134 container">
  <button style="vertical-align: middle;">按钮</button>
</div>

上述代码中，我们创建了一个名为`.container`的CSS类，将其`height`属性设置为`200px`，并使用`display: flex;`、`align-items: center;`和`justify-content: center;`来实现容器内元素的垂直和水平居中。然后，我们在`.container`元素内部放置了一个按钮元素`<button>`，并将按钮的`vertical-align`属性设置为`middle`，按钮就会在`.container`元素中垂直居中显示。

通过使用这些CSS样式，我们可以轻松地实现HTML按钮的居中显示。