Center slideshow images vertically/horizontally within a div

Center slideshow images vertically/horizontally within a div

I've created a slideshow using jQuery Cycle and pagerAnchorBuilder to create thumbnails. Everything works wonderfully except that the images are not centered. Images with shorter width show on the left, and images with shorter height show on top inside the div. I tried margin: 0 auto; display: block; text-align: center; but nothing seems to work. It seems to be conflicting with the jQuery plugin. My guess is that it needs an additional plugin for the Cycle for the images to be centered. 

I looked up and there's a center plugin for Cycle2, but I'm assuming this is not compatible with the Cycle plugin that I have set up (or is it?). The Cycle plugin only seems to center vertically with CSS.

Any tips or solutions are very much appreciated. You can see what I have so far: http://jsfiddle.net/bdesign/6kf4m/6/
or