Bootstrap 3 - How to center the modal

by jonjohnjohnson

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">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                    </button>
                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                </div>
                <div class="modal-body">fjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj kljfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj kljfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl jfjkdlas dfj klj jklj kl jkl j</div>
                <div class="modal-footer">
                    <button...

CSS

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    min-height: 100%;
    pointer-events:none;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.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: 20px auto;
    max-width: 500px;
    pointer-events:all;
}
.modal-body {
    max-height: 50vh;
    overflow: auto;
}