css - 行内的元素要居中对齐

我想要的是这些圆是居中对齐的，我尝试使用一些显示内联块，但对它没有影响，并且使用了其他一些使居中对齐的属性，但是我失败了picture of those circles
我已经整天在搜索这个了：s

在这方面如何帮助我？
您的帮助将不胜感激。

谢谢

.menu{
    width:70px;
    height:70px;
    border-radius:50px;
    font-size:20px;
    color:green;
    line-height:100px;
    background:#32C947;
    overflow: hidden;
    list-style-type: none;
    margin-left: auto;
    margin-right: auto;
    display: table-cell;
    vertical-align: middle;
}

.menu:hover{
    color:#ccc;
    text-decoration:none;
    background:#333
}

<div class = "container">
  <div class="row ">
        <div class="col-md-12 ">
          <h1 class = "_font ">All Plans Include</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Hello</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>
      </div>
    </div>

最佳答案

.menu{
    width:70px;
    height:70px;
    border-radius:50px;
    font-size:20px;
    color:green;
    line-height:100px;
    background:#32C947;
    display: block;
    overflow: hidden;
    list-style-type: none;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}
.center{
    text-align: center;
}

.menu:hover{
    color:#ccc;
    text-decoration:none;
    background:#333
}

<div class = "container">
  <div class="row justify-content-center">
        <div class="col-md-12 center">
          <h1 class = "_font ">All Plans Include</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Hello</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>
      </div>
    </div>