如何在按钮中间居中显示文本？

<style>
  .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

<div class="button-container">
  <button>按钮文本</button>
</div>

<style>
  .button-container {
    position: relative;
  }

  .button-container button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<div class="button-container">
  <button>按钮文本</button>
</div>

<style>
  .button-container {
    display: table;
    width: 100%;
    height: 100%;
  }

  .button-container button {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
</style>

<div class="button-container">
  <button>按钮文本</button>
</div>