如何将DIV放在浏览器的中心

Question

我正在开发移动应用。我有饼图和条形图，如何将固定大小的DIV放在浏览器的中心 窗口。如果浏览器调整大小，我希望DIV调整它的位置。 我试过的。实际上是它的“R图”

<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

工作示例：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;
}

Answer 2

将div放在Browser / Div的中心，甚至在页面滚动

上

您只能使用 CSS 将div放在中心，方法是使用以下hack

#output{
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

正常工作div（#output）必须具有固定的高度和宽度