css - adjust the child position to the center of the parent in jquery -

i'm prototyping navigation site sits on bottom of window. when hover on link div appears above naivigation sub-links, not position centrally above hovered link in navigation. i've tried using css position -50% left has had of effect [looks move 50% left of parents size], how do using jquery?

note: i'm using hoverintent.

position (fixed) 1 pixel wide container div instead, , offset inner element (your actual item) half of absolute width. trick has worked me.

html:

  <style type="text/css">     #testnav-container {       position:fixed;       bottom:0;       left:50%;       width:1px;       border:1px solid red;       text-align:center;     }     #testnav {       height:20px;       width:100px;       background:blue;       margin-left:-50px;     }   </style>   <div id="testnav-container">     <div id="testnav">test navigation bar</div>   </div> 

the 1px border on container div show where's at. try out , tell me how goes.

snippet jquery example run in console:

var foo = $('<div style="position:fixed;bottom:0;left:50%;width:1px;border:1px solid red;text-align:center;"><div style="height:20px;width:100px;background:blue;margin-left:-50px">test navigation bar</div></div>').appendto('body');