Bootstrap 3 - How to center the modal

by aflynt

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  
   <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    
                     <h4 class="modal-title" id="myModalLabel">Emotional</h4>
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                    </button>
                </div>
                <div class="modal-body">  
									    <img class="center-block" src="https://soco365.sharepoint.com/sites/GPC-HR/PublishingImages/mental-well-being.png">
									    <p>Growing in knowledge and critical thinking that enhances our ability to develop solutions and make sound decisions - being present in the moment.</p></div>
               
            </div>
        </div>
    </div>
</div>

CSS

.modal {
}

button.close {
  position: absolute;
  right: 34px;
  top: -187px;
}

.modal-content {
    background-color: transparent;
    box-shadow: none;
    border:0px;
}

.modal-header {
  border-bottom:0px;
}

.modal-title {
  text-align:center;
}

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
}