bootstrap center 3 col-md-3 divs

Question

I have a wrapper like so: <div class="community-images"></div>

and inside this wrapper I have 3 col-md-3 divs:

<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>

what I am trying to do is center these 3 divs inside the wrapper, how would I accomplish this ?

Here is the CSS:

.community-images {
  padding: 40px 0px 40px 0px;
}

.col-md-3 {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  min-height: 300px;
  box-shadow: 10px 10px 5px #888888;
}

Answer 1

For anyone using Bootstrap 4, this feature has been added: http://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>