Centering an item inside Bootstrap Column

Question

I have a container with three col-md-4 inside. Each column has a card layout. Everything is displaying just fine. However, if the window is resized under 992px and the columns get stacked, they float to left. At first i used:

<div align="center">

but it is not so HTML5. Any other solution did not help.

Here's all i got right now:

<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;
    }

Fiddle

Answer 1

If you add margin:50px auto; to .card in your CSS it will center align the cards. 50px will remain the margin on the top and bottom of the card and auto works to center align. New card styles would look like this:

.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;
}