如何將 div 中的文本垂直和水平對齊到中心？

Question

我在讓這段代碼垂直和水平居中對齊時遇到問題： <h1 className="display-4 fw-bolder mb-4 text-center text-white">History</h1>

任何輸入都有幫助。 謝謝。

<div>
      <section id='vision'>

        <div className="container">
          <div className="row justify-content-center">
            <div className="col-md-8 mt-5">
              <h1 className="display-4 fw-bolder mb-4 text-center text-white">History</h1>
            </div>
          </div>
        </div>

      </section>
     
    </div>
  )

Answer 1

實現此目的的一種方法是將h1更改為span並添加以下 CSS 樣式：

    display: flex;
    align-items: center;
    justify-content: center;

或者通過在 span 的父級上使用引導類： d-flex justify-content-center align-content-center

<div>
      <section id='vision'>

        <div className="container">
          <div className="row justify-content-center">
            <div className="col-md-8 mt-5 d-flex justify-content-center align-content-center">
              <span className="display-4 fw-bolder mb-4 text-center text-white">History</span>
            </div>
          </div>
        </div>

      </section>
     
    </div>