jquery fancybox content not centering in Chrome

It's a css problem I figure, but nothing I do makes Chrome place the contents of the fancybox sit right in the centre. Not the centre of the screen; the centre of the display box.

Is it part of #fancybox-wrap?

#fancybox-wrap {
position: absolute;
margin: 20 0 0 20;
padding: 20px;
z-index: 1101;
outline: none;
display: none;
}

I've tried a million things but only Chrome won't push the contents (an image) down and to the right.

OK - here's a bit more of the css that might be relevant:

#fancybox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1100;
display: none;
}

#fancybox-tmp {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: none;
}

#fancybox-wrap {
position: absolute;
    margin: 20 0 0 20;
padding: 20px;
z-index: 1101;
outline: none;
display: none;
}

#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #000;
}

#fancybox-content {
width: 0;
height: 0;
padding: 0;
outline: none;
position: relative;
overflow: hidden;
z-index: 1102;
border: 0px solid #000;
}

The html I am using is:

<div class="fancybox-wrap">
<a id="special" href="http://domain.com.au/images/coupons.png"></a>
</div>

Solution

Switch your fancy-box type option to image and you should be fine. Here is a JSFiddle update with the fix that looks good in Chrome: http://jsfiddle.net/PY2dU/5/

Relevant code:

$("#special").fancybox({
        'title'             : 'SPECIAL OFFERS',         
        'width'             : 630,
        'height'            : 465,
        'autoScale'         : true,
        'autoDimensions'    : true,
        'transitionIn'      : 'elastic',
        'transitionOut'     : 'elastic',
        'speedIn'           : 200, 
        'speedOut'          : 200,
        'overlayShow'       : true,
        'centerOnScroll'    : true,
        'easingIn'          : 'easeOutBack',
        'easingOut'         : 'easeInBack',
        'type'              : 'image'
});