如何垂直居中 Twitter Bootstrap 3 模态？答案

【问题标题】：How to vertical-center Twitter Bootstrap 3 modal?如何垂直居中 Twitter Bootstrap 3 模态？
【发布时间】：2013-10-03 05:11:23
【问题描述】：

我一直在尝试将 Boostrap 3 模态对话框垂直居中，但没有成功。怎么实现？

【问题讨论】：

标签： html css twitter-bootstrap modal-dialog vertical-alignment

【解决方案1】：

 <style>
     .modal-vertical-centered {
         display: flex;
         align-items: center;
     }
 </style>

<div class="modal fade modal-vertical-centered" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">

【讨论】：

【解决方案2】：

您可以像这样在 Bootstrap 3 modal 上实现垂直对齐中心：

.modal-vertical-centered {
transform: translate(0, 50%) !important;
-ms-transform: translate(0, 50%) !important; /* IE 9 */
-webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

并将这个 css 类添加到“modal-dialog”容器中

<div class="modal-dialog modal-vertical-centered">
...

jsFiddle 工作示例：http://jsfiddle.net/U4NRx/

【讨论】：

这会移除向下滑动的动画效果。
真棒伙伴..它确实消除了向下滑动的效果，但它只是淡入并在中心淡出。所以那些需要它来集中注意力的人..这是要走的路。
注意：该示例根本不起作用，如果模态的内容很长...请注意，它仅在内容短/小时才有效。