Bootstrap gives us many opportunities to horizontally center content, normally via .col-*-offset-* css class.  However, what if you want to vertically center content as well?  Bootstrap doesn’t make that very easy.

I came across this issue recently. The background story is that I had a row with a background image, and inside of that row was different content that always needed to be centered.  Here’s my solution after I googled and found some examples:

.row.middle-content {
 position: relative;
 min-height: 392px;
}
.row.middle-content > div {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 margin: 0;
}

<div class="container">
 <div class="row middle-content">
 <div class="col-xs-8">
 We have content in here.
 </div>
 </div>
</div>

Please note that this requires you to specify a min height of the .row.middle-content class.

I have also created a fiddle that will help demonstrate this.  Check it out: http://jsfiddle.net/thindery/fzmf223g/