Centering angular bootstrap modal window vertically

Question

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.jsor 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.

Add an id to your div and follow the [instructions here](http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ "center anything vertically") — 1Bladesforhire, May 20 '15 at 18:39

tao · Accepted Answer · 2023-05-15T12:24:26.517

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">&times;</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">&times;</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>

This is the only solution I've come across that doesn't result in a tiny modal when the viewport is smaller. Thank you — Anthony Jack, Jun 19 '17 at 22:42

Centering angular bootstrap modal window vertically

1 Answers1