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

Question

我一直在尝试垂直居中Bootstrap 3模态对话框，但没有成功。如何实现？

- Rui

Answer 1

您可以在Bootstrap 3模态框上实现垂直居中对齐，方法如下:

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

以上是需要翻译的内容，请查收。

- EGurelli

---

这将移除下滑动画效果。 - Nate

太棒了伙计..它确实消除了下滑效果，但只是在中心淡入和淡出。所以那些需要居中的人..这就是正确的方法。 - Clain Dsilva

请注意，如果模态框中的内容很长，则该示例根本无法工作……请注意，它仅适用于内容短小的情况。 - zeroasterisk

Answer 2

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

- user7544594