<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <h2>using background image</h2> <div class="col-md-6"> <div class="parent-div"> <div class="child-div"> <h3>Hello world!</h3> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <h2>using image</h2> <div class="col-md-6"> <div class="parent-div2"> <img src="http://placehold.it/700x300" class="img-responsive"> <div class="child-div2"> <h3>Hello world!</h3> </div> </div> </div> </div> </div>

/* Using background image*/ .parent-div{ position: relative; padding-top:50px; padding-bottom:50px; background:url('http://placehold.it/700x150') center; background-repeat:no-repeat; background-size:cover; } .child-div{ position: absolute; /*width: 100%; */ top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* Using imgae */ .parent-div2{ position: relative; } .child-div2{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }