使用text-align:center;

• CSS的text-align屬性是用來設定網頁容器（ex:div,span,...）內的文字、圖片等元素的水平對齊效果。
• 生效條件
  1.給元素設置text-align:center，其中的文字或圖片等元素即可達到水平置中。
• 範例

  .parent{
      border: 2px solid green;
      width: 500px;
      height: 100px;
    }
  .child{
      width: 100px;
      margin: 0 auto;
      border: 2px solid blue;
      text-align: center;
    }

    <div class="parent">
        <p class="child">文字置中</p>
        <p class="child">文字置中</p>
    </div>

• 結果
  

還有一種方式(Bootstrap),

使用 class="text-center"

• 生效條件
  1.給元素設置.text-center，文字即可達到水平置中。
• 範例

  <div class="container border border-primary">
        <p class="text-center">Center aligned text on all viewport sizes.</p>
  </div>

• 結果