how to place a DIV in the center of the browser

Question

I'm working on mobile app. I have Pie and Bar Chart,how to place a fixed size DIV in the center of the browser window. If the browser is resized I'd like the DIV to adjust it's position. what i tried. Actually its "R Graph"

<div id="output" ><canvas id="cvs" width="350" height="350" >[No canvas support]</canvas></div>

<script>
$(document).ready(function ()
    {
        var pie = new RGraph.Pie('cvs', [45,20,25,10])
            .set('colors', ['#F00', '#F00','#666','#ccc'])
            .set('events.click', myEventListener)
            .set('events.mousemove', function (e, piechart) {e.target.style.cursor = 'pointer';})
            .set('title.y', 30)
            .set('key', ['sunday','monday','tuesday','wednesday'])
            .set('key.colors', ['#f00', '#f00','#666','#ccc'])
            .set('key.interactive', true)
            .set('key.position', 'gutter')
            .set('gutter.left', 45)
            .set('key.position.y', 315)
            .set('key.rounded', false)
            .set('radius', 100)
            .set('linewidth', 1)
            .draw();
    })
</script>

<style>
#output {
width: 350px;
height: 350px;
background-color: none;
position: absolute;
top:0;
bottom: 40%;
left: 0;
right: 0;
margin: auto;
}

</style>

Answer 1

Working example: http://jsfiddle.net/Gajotres/8kXWV/

HTML:

<div data-role="page" id="index">
    <div data-theme="b" data-role="header">
        <h1>Index page</h1>
    </div>

    <div data-role="content">
        <img src="http://images5.fanpop.com/image/photos/29500000/GamesRadar-Puppy-puppies-29566786-200-200.jpg" alt="image"/>
    </div>
</div>    

JavaScript

function center(){
    w=$(window).width();
    h=$(window).height();

    img_w=$('img').width();
    img_h=$('img').height();

    pos_top=(h-img_h)/2; 
    pos_left=(w-img_w)/2;

    $('img').css({'top':pos_top,'left':pos_left+'px', position: "absolute"});
}

$(document).on('pageshow', '#index', function(){ center(); });
$( window ).on( "orientationchange resize", function( event ) {
    center();
});

CSS

.ui-content {
    position:absolute;
    top:40px;
    right:0;
    bottom:0;
    left:0;
}