CODEWITHSUNDEEP
htmlcssjquery-mobile
neeraj
neeraj

Reputation: 223

how to place a DIV in the center of the browser

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>

Upvotes: 1

Views: 88

Answers (3)

Mete Oyama
Mete Oyama

Reputation: 9

.center{
display: flex;
justify-content:center;
align-items: center;
width:100vw;
height:100vh;
background-color:white;
}

.obj{
background-color: black;
width:100px;
height: 100px;
display:flex;
justify-content:center;
align-items:center;
}

h4{
color:white;
}
<body>
  <div class="center">
    <div class="obj"><h4>Center</h4></div>
  </div>
</body>

Upvotes: 0

Jay Bidwai
Jay Bidwai

Reputation: 309

Place div in center of Browser / Div even on page scroll

You can place div at center only by using CSS by using following hack

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

to work this properly div (#output) must have fixed Height and Width

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

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;
}

Upvotes: 2

Related Questions