Html 将项目居中放置在引导列中

我有一个里面有三个col-md-4的容器。每列都有一个卡片布局。一切都很好。但是，如果窗口在992px下调整大小，并且列堆叠在一起，则它们会向左浮动。起初，我使用：

<div align="center">

但HTML5并非如此。任何其他解决方案都无济于事

以下是我现在得到的所有信息：

<div class="categories">
  <div class="container">
    <div class="row">
      <!-- 1st card -->
      <div class="col-md-4">
        <div class="card">
          <div class="cardoverlay">
            <div class="line">
              <hr>
              <i class="fa lifering"></i>
              <hr>
            </div>
          </div>
        </div>
      </div>
      <!-- 2nd card -->
      <div class="col-md-4">
        <div class="card">
          <div class="cardoverlay">
            <div class="line">
              <hr>
              <i class="fa cogs"></i>
              <hr>
            </div>
          </div>
        </div>
      </div>
      <!-- 3rd card -->
      <div class="col-md-4">
        <div class="card">
          <div class="cardoverlay">
            <div class="line">
              <hr>
              <i class="fa cubes"></i>
              <hr>
            </div>
          </div>
        </div>
      </div>
    </div>`

        .categories {
      background-color: #e1e1e1;
      height: auto;
      text-align: center;
    }

    .card {
      max-width: 353px;
      height: 662px;
      -webkit-border-radius: 5px/7px;
      -moz-border-radius: 5px/7px;
      border-radius: 8px/10px;
      background-color: #fff;
      -webkit-box-shadow: 0 2px #b8b3b3;
      -moz-box-shadow: 0 2px #b8b3b3;
      box-shadow: 3px #b8b3b3;
      margin-top: 50px;
      margin-bottom: 50px;
    }

    .line {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;
    }

    hr {
      border: 0;
      border-top: 1px solid #c2c6c7;
      flex: 1;
      z-index: 1;
    }

    .lifering:after {
      font-size: 90px;
      color: #d67676;
      padding: 20px;
      content: '\f1cd';
      display: inline-block;
      text-shadow: 0.7px -1px 0.7px #450c04;
    }

    .cogs:after {
      font-size: 90px;
      color: #329fdd;
      padding: 20px;
      content: '\f085';
      display: inline-block;
      text-shadow: 0.7px -1px 0.7px #000000;
    }

    .cubes:after {
      font-size: 90px;
      color: #36d7b7;
      padding: 20px;
      content: '\f1b3';
      display: inline-block;
      text-shadow: 0.7px -1px 0.7px #000000;
    }


    .cardoverlay {
      max-width: 353px;
      height: 202px;
      -webkit-border-radius: 5px 5px 0 0/10px 10px 0 0;
      -moz-border-radius: 5px 5px 0 0/10px 10px 0 0;
      border-radius: 5px 5px 0 0/10px 10px 0 0 #f1f1f1;
      background-color: #f9f9f9;
      -webkit-box-shadow: 0 3px #f1f1f1;
      -moz-box-shadow: 0 3px #f1f1f1;
      box-shadow: 0 3px #f1f1f1;
    }

`
.类别{
背景色：#e1e1；
高度：自动；
文本对齐：居中；
}
.卡片{
最大宽度：353px；
身高：662px；
-webkit边界半径：5px/7px；
-moz边界半径：5px/7px；
边界半径：8px/10px；
背景色：#fff；
-网络工具包盒阴影：0 2px#b8b3b3；
-moz盒阴影：02px#b8b3b3；
盒影：3px#b8b3b3；
边缘顶部：50px；
边缘底部：50px；
}
.线路{
显示器：flex；
宽度：100%；
对齐项目：居中；
证明内容：中心；
}
人力资源{
边界：0；
边框顶部：1px实心#c2c6c7；
弹性：1；
z指数：1；
}
.lifering:之后{
字体大小：90px；
颜色：#d67676；
填充：20px；
内容：'\f1cd'；
显示：内联块；
文本阴影：0.7px-1px 0.7px#450c04；
}
.cogs:之后{
字体大小：90px；
颜色：#329fdd；
填充：20px；
内容：'\f085'；
显示：内联块；
文本阴影：0.7px-1px 0.7px#000000；
}
.以后{
字体大小：90px；
颜色：#36d7b7；
填充：20px；
内容：'\f1b3'；
显示：内联块；
文本阴影：0.7px-1px 0.7px#000000；
}
.cardoverlay{
最大宽度：353px；
高度：202px；
-webkit边界半径：5px 5px 0 0/10px 10px 0 0；
-moz边界半径：5px 5px 0 0/10px 10px 0 0；
边界半径：5px 5px 0 0/10px 10px 0 0#f1f1；
背景色：#f9f9f9；
-网络工具包盒阴影：0 3px#f1f1；
-莫兹盒阴影：0 3px#f1f1；
盒影：0 3px#f1f1；
}

---

如果添加边距：50px自动到。卡片在CSS中，它将使卡片居中对齐。50px将保留卡顶部和底部的边距，并自动对齐中心。新卡片样式如下所示：

.card {
  max-width: 353px;
  height: 662px;
  -webkit-border-radius: 5px/7px;
  -moz-border-radius: 5px/7px;
  border-radius: 8px/10px;
  background-color: #fff;
  -webkit-box-shadow: 0 2px #b8b3b3;
  -moz-box-shadow: 0 2px #b8b3b3;
  box-shadow: 3px #b8b3b3;
  margin:50px auto;
}

---

谢谢你，真管用！例如，可能会问为什么在卡片中而不是在卡片覆盖中？基本上

margin:0 auto

将应用样式的任何div居中于其父div内。因此，在本例中，您希望将其放置在

.col-md-4

的第一个子div上，即

.card

。如果你把它放在

.cardoverlay

上，它会在

内的
.cardoverlay
中间，因为它们的宽度相同，所以你看不到任何效果。