How can I center this modal window vertically regardless of the size of the contents displayed. In my page, I am displaying an image as a modal window and I would like it to display in the center of the screen. I can align it horizontally, but I can't get it to cooperate vertically. Any ideas/examples of this being done?
I followed this example in my page: modal window demo plunker
but my actual content of the modal window looks like this:
<script type="text/ng-template" id="myModalContent.html">
<div>
<img class= "attachmentImage" src={{items}} />
</div>
</script>
Should I be looking to make changes in bootstrap.min.css
or ui-bootstrap-tpls-0.13.0.js
or is the best way to approach this with my styles in my own sheet.
Thank you very much for your time. Let me know if you need more information or if I am being unclear.
I strongly disagree with 1Bladesforhire's answer, because the top of the modal
container becomes inaccessible when it is taller than the viewport height. This is a common issue when centering taller children than the parents, using the absolute
vertical centering method.
My preferred method of vertically centering a Bootstrap modal is
.modal-dialog {
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
.modal-dialog {
min-height: calc(100vh - 20px);
}
}
/* you only need the above CSS. The code below centers the modal trigger button */
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
While vertically centred when shorter than the viewport height, .modal-content
is still fully accessible (even with a height of 300vh
):
.modal-dialog {
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
.modal-dialog {
min-height: calc(100vh - 20px);
}
}
/* you only need the above CSS. The code below centers the modal trigger button */
.modal-content {
height: 300vh;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>