Html 如何在bootstrap 3模式中居中放置spin.js微调器？

我试图在Bootstrap 3模式中显示spin.js微调器并将其居中。使用下面的代码，我让它在IE和FF中工作，但不在Chrome、Safari桌面、Chrome IOS、Safari IOS中工作

问题似乎与淡入动画（灰色背景覆盖）有关，因为当我将modal类设置为仅“modal show”时，它可以工作，但当然没有淡入动画。看这个。当我使用“$（'#search_Modal”）.Modal（'show'）；“它在上述某些浏览器中不起作用

在chrome和firefox上运行这个，你就会明白我的意思。有人知道如何修复这个问题或正确地执行它吗？我确实希望引导模式淡入工作

我正在使用bootstrap3和spin.js

<div id="Searching_Modal" class="modal fade" tabindex="-1" role="dialog" data-keyboard="false"
 data-backdrop="static">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header" style="text-align: center">
            <h3>Searching for Seats</h3>
        </div>
        <div class="modal-body">
            <br>
            <br>
            <br>

            <div id="searching_spinner_center" style="position:fixed; left:50%"></div>
            <br>
            <br>
            <br>
        </div>
        <div class="modal-footer" style="text-align: center"></div>
    </div>
</div>

---

尝试将div.modal-body替换为

<div class="modal-body" >
   <div style="height:200px">
      <span id="searching_spinner_center" style="position: absolute;display: block;top: 50%;left: 50%;"></span>
    </div>
</div>

---

为我工作。

谢谢，@userfb。回答得很好。次要修复：您的JSFIDLE在结尾处有一个额外的结尾。

。更新的JSFIDLE在这里：

<div class="modal-body" >
   <div style="height:200px">
      <span id="searching_spinner_center" style="position: absolute;display: block;top: 50%;left: 50%;"></span>
    </div>
</div>