jQuery Scrollable Center Active Frame

I'm using jQuery Tools Scrollable plugin. I'm trying to make it so that the active frame is in the center of the screen.

I have the Scrollable wrapper set to 100% width and it works great, but the active frame is aligned to the left. What I want is for the active frame to be center. For a better explanation, see this mockup of what I'm trying to achieve.

FYI: This is my structure:

<div class="scrollable">
    <div class="prev browse left disabled"></div>

    <div class="items">
        <div class="pane">
            Content
        </div>
        <div class="pane">
            Content
        </div>
    </div>

    <div class="next browse left"></div>
</div> 

Thanks!

I figured it out. You can't use margin: 0 auto on .items because .items is too wide. Umesh tried to address this by providing a width it .items, but this is not dynamic. Also, jQuery Tools Scrollable still tries to position the active frame to the left anyway.

Here is what i did.

I setup the scrollable as 100% width of the browser. The .pane is 800px wide all the time.

Then I wrote this JavaScript:

// Get window width
var winWidth = jQuery(window).width();

// winWidth divided by 2, subtract half the width of .pane
var itemsMargin = (winWidth/2)-400;

// Resize the homepage scrollable panes
jQuery('.scrollable .items').css('margin-left', itemsMargin+'px');

This has the center of the active .pane allways in the center of the screen. I then setup a .resize() call back to reclaculate the left margin when the browse is resized. It works great!