javascript - Centering spin.js spinner inside a (target) div -

i have following simple markup , style (see jsfiddle):

html:

<div id="wrapper"><div id="content"></div></div>     

css:

#content {     background-color:lightyellow;     height:200px;     color:green; } #wrapper{     border:1px solid black;     color:red; } 

i'm setting spinner target #content div using both vanilla js , jquery options , encounter couple of problems. first, in both cases, spinner not appear constructed in middle of targeted element's parent, contrary documentation says:

positioning
since version 2.0.0 spinner absolutely positioned @ 50% of offset parent. may specify top , left option position spinner manually.

second, when using vanilla js, spinner not use color set on target. when starting using jquery, (i.e. #content uses green).

am understanding documentation wrong? if so, how can center spinner inside specific element? if not, why isn't snippet above centering spinner inside target?

simply add

position: relative; 

to #content css rule.

css:

#content {     background-color: lightyellow;     text-align: middle;     height: 200px;     color: green;     position: relative; }  #wrapper {     border: 1px solid black; } 

see updated jsfiddle here.

edit:

the jquery plugin spin.js take on color of parent if have not set color on initialisation. because has additional functionality built in. in jquery.spin.js (on line 65):

opts = $.extend(   { color: color || $this.css('color') },   $.fn.spin.presets[opts] || opts ) 

this pick color of parent container , replace color in opts object spinner has correct color.

if want replicate functionality in standard javascript, this:

$(document).ready(function () {     var opts = {         lines: 17, // number of lines draw         length: 26, // length of each line         width: 12, // line thickness         radius: 3, // radius of inner circle         corners: 1, // corner roundness (0..1)         rotate: 0, // rotation offset         direction: 1, // 1: clockwise, -1: counterclockwise         color: '#000', // #rgb or #rrggbb or array of colors         speed: 1.1, // rounds per second         trail: 74, // afterglow percentage         shadow: true, // whether render shadow         hwaccel: false, // whether use hardware acceleration         classname: 'spinner', // css class assign spinner         zindex: 2e9, // z-index (defaults 2000000000)         top: '50%', // top position relative parent in px         left: '50%' // left position relative parent in px     };      //$('#content').spin(opts);      var target = document.getelementbyid('content');     opts.color = getcomputedstyle(target).getpropertyvalue('color');     var spinner = new spinner(opts).spin(target); }); 

see updated jsfiddle.