如何使用CSS将按钮居中显示

<p>可以使用CSS样式将按钮居中显示，具体方法如下：</p>
<ol>
<li>在<head>标签中添加<style>标签，定义样式：</li>
</ol>
<style>
  .ui.form .field:last-child {
    text-align: center;
  }
</style>
<ol start="2">
<li>修改<button>标签所在的<div>标签，添加class属性为“centered”：</li>
</ol>
<div class='field centered'>
  <button id='answer' onclick='callCHATGPT()' class='ui primary button'>点击回答</button>
  <button onclick='location.reload()' class='ui button'>清空内容</button>
  <button onclick='copyCode()' class='ui button'>复制结果</button>
  <button id='saveBtn' class='ui button'>保存Key</button>
  <button onclick='save()' autocomplete='off' class='ui button'>保存内容</button>
  <button id='btn_grants' onclick='viewGrants()' autocomplete='off' class='ui button'>查看费用</button>
  <button class='ui button' onclick='document.getElementById('result').innerHTML='请添加微信****'; document.getElementById('result').style.color='red''>开通会员</button>
</div>
<ol start="3">
<li>添加.centered样式，使按钮居中显示：</li>
</ol>
<p>.centered {
display: flex;
justify-content: center;
}</p>
<p>这两种方法都可以实现按钮居中显示的效果，您可以根据自己的需要选择使用。</p>