spin.js顶部选项不起作用

Question

I try to use the spin.js

I want it to pop up in the middle of the div element. So I did set:

position: 'relative' top:'50%' left:'50%'

but the top option doesn't work. After analyzing the problem I could break it down to a html/css problem:

<div style="background-color: red">
    <div style="position:relative; height:20px; width:20px; top:50%; left:50%; background-color:blue"></div>
    1st div line<br>br line<br>br line 2
    <div>div line 1</div>
    <div>div line 2</div>
</div>

In this example the blue element should be in the middle of the red, but it isn't. and here is the fillde for it:

http://jsfiddle.net/exu77/obcg3cxv/

This is the plunker to the original version with spin.js

http://plnkr.co/edit/qwjArDtnqGZQgbkQiRYt?p=preview

Answer 1

I was able to get it to work by adding a height to the jsSpinner div.

<div id="jsSpinner" style="background-color:red; height: 100px;">spin in the red part
<br>br line
<br>br line 2
<div>div line</div>
<div>div line 2 </div>

As for why this works? That part I don't know.

Answer 2

The position:relative must be applied to the parent element, ie the div that contains the spinner. The spinner itself needs position:absolute (which is the default). Here is is an updated version of your plunker where the spinner is centered inside the red box: http://plnkr.co/edit/GstXJdzyDtBIyMLuzbcY?p=preview