<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="valign-demo vertical-wrapper"> <h5 class="vertical center" style="width: 100%;">Code snippet for vertical align center.</h5> </div> </div> </div> </div>

.valign-demo { height: 400px; background-color: #22c3cf; } .vertical-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .vertical-wrapper .vertical { display: block; } .center { text-align: center; vertical-align: middle; } h5 { color: #fff; font-size: 20px; }