CSS Horizontal and Vertical align center trick

Horizontal center align

<div class="row box-wrapper row-center" />
 <div class="col-lg-3 col-md-3 box-item one col-center"></div>
 <div class="col-lg-3 col-md-3 box-item two col-center"></div>
 <div class="col-lg-3 col-md-3 box-item three col-center"></div>
</div>

.box-wrapper {
  border: 1px solid black;
  padding :20px; 
  margin-top: 100px
}
.box-item {
  height: 100px;
}
.one {
    border: 1px solid red;
}
.two {
    border: 1px solid blue;
}
.three {
    border: 1px solid brown;
}
.row-center {
  text-align: center;
}
.col-center {
  float: none;
  display: inline-block;
}

Vertical align middle

<div class="row box-wrapper row-middle" />
 <div class="col-lg-3 col-md-3 box-item one"></div>
 <div class="col-lg-3 col-md-3 box-item two"></div>
 <div class="col-lg-3 col-md-3 box-item three"></div>
</div>

.box-wrapper {
  border: 1px solid black;
  padding :20px; 
  margin-top: 100px;
  height: 500px;
}
.box-item {
  height: 100px;
}
.one {
    border: 1px solid red;
}
.two {
    border: 1px solid blue;
}
.three {
    border: 1px solid brown;
}
.row-middle {
  vertical-align: middle;
  display: table-cell;
}