Question

无论显示的内容大小如何，如何将此模态窗口垂直居中。在我的页面中，我将图像显示为模态窗口，我希望它显示在屏幕的中央。我可以水平对齐，但我不能让它垂直配合。有没有这方面的想法/例子？

但我的模态窗口的实际内容如下所示：

<script type="text/ng-template" id="myModalContent.html">
        <div>
             <img class= "attachmentImage" src={{items}} />
        </div>
</script>

我是否应该在bootstrap.min.css或ui-bootstrap-tpls-0.13.0.js中进行更改，或者是在我自己的工作表中使用我的样式来解决此问题的最佳方法。

非常感谢你的时间。如果您需要更多信息或我不清楚，请告诉我。

Answer 1

我非常不同意1Bladesforhire的回答，因为modal容器的顶部高于视口高度时无法访问。使用absolute垂直居中方法时，这是一个常见的问题，当使较高的孩子比父母居中时。

我首选的垂直居中模式的方法是

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

虽然在比视口宽度短的情况下垂直居中，但.modal-content仍然可以完全访问，即使它的高度为300vh：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

在您的div中添加一个ID并按照instructions here

进行操作

垂直居中角度自举模态窗口

2 个答案: