How to center spin.js spinner in bootstrap 3 modal?

Question

I am trying to display and center the spin.js spinner in a Bootstrap 3 modal. Using the code below I got it to work in IE and FF but NOT in Chrome, Safari Desktop, Chrome IOS, Safari IOS.

The problem seems to be tied to the fade in animation (gray backdrop overlay) because when I set the modal class to just "modal show" it works but with no fade in animation of course. See this jsfiddle. It's when I use "$('#Searching_Modal").modal('show');" that it does not work in some of the browsers described above.

Run this jsfiddle on both chrome and firefox and you will see what I mean. Does anybody know how to fix this or do it properly? I do want the bootstrap modal fade in to work.

I'm using Bootstrap 3 and 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>

Here is the spin.js set up code:

var opts = {
  lines: 13, // The number of lines to draw
  length: 20, // The length of each line
  width: 10, // The line thickness
  radius: 30, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 0, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  color: '#000', // #rgb or #rrggbb or array of colors
  speed: 1, // Rounds per second
  trail: 60, // Afterglow percentage
  shadow: false, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: 'auto', // Top position relative to parent in px
  left:'auto' // Left position relative to parent in px
};
//var target = document.getElementById('center_spinner');
var target = document.getElementById('searching_spinner_center');
var spinner = new Spinner(opts).spin(target);

Answer 1

Try replacing div.modal-body by

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

Work for me. http://jsfiddle.net/D6rD6/5/