javascript - spin.js top option does not work -

i try use spin.js

i want pop in middle of div element. did set:

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

but top option doesn't work. after analyzing problem break down 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 example blue element should in middle of red, isn't. , here fillde it:

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

this plunker original version spin.js

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

the position:relative must applied parent element, i.e. div contains spinner. spinner needs position:absolute (which default). here is updated version of plunker spinner centered inside red box: http://plnkr.co/edit/gstxjdzydtbiymluzbcy?p=preview