bootstrap col中的div如何居中居中

Question

我想要创建一个带有文本中心的方形框。以下是我希望的：

我正在使用Django和Bootstrap。在我的广场上，我已经按照这里的指示进行：http://www.mademyday.de/css-height-equals-width-with-pure-css.html

然后，这是我的HTML代码：

  <div class="container-fluid d-flex h-100 flex-column">
        <div class='row flex-fill'>
          <div class='colonne_salle col-sm-2'>
            <div class='row'>
                {% for s in salle %}
                <div class='col-sm-6 square'>
                  <div class="bloc-salle" id="{{ s.name }}">
                      <h3 class='nom-salle'>{{ s.name }}</h3>
                  </div>
                </div>
                {% endfor %}
            </div>
          </div>

还有我的CSS：

.bloc-salle{
  /* margin : 15px 0 15px 0; */
  position:  absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.square:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

目前，我得到以下结果：

非常感谢您的帮助！

编辑： 在关于正方形网格的答案中，没有一个描述了如何垂直放置每个正方形内部的内容。

Answer 1

您可以将align-center与.bloc-salle一起使用