如何使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>