Margin div to center both horizontal and vertical

Question

I cant margin the div id by : game-area to center horizontal and vertical.

It need be work at cross platform. I tried to set marig-top or padding, but on margin the background image is goind down with div. When i use padding the site look different on all resolution.

I also tried in css to set display as table and margin auto but it only align one dimension

The page of website (after click "zagraj" the content is refresh and this refresh one need be margined) :

http://nwstudio.esy.es/panda/main/

Phaser:

var game = new Phaser.Game(360,640,Phaser.CANVAS, 'game-area');

HTML:

<body> 
    <div id="main">
        <CENTER>
                <img src="img/background.png"/>
        </CENTER>
    <center>
        <a href='#' id='run'><img src="img/button_start.png"/></a>
    </center>
    </div>

    <div id="game-area">
    </div>
</body>

CSS:

body{
    padding: 0px;
    margin: 0px;
    background-image: url('../img/background_second.png');
    height: 100vh;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    overflow-y: hidden;
    position: relative;
}

#game-area{
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align:middle;
}

#main{
    display: block; background-color: #FFF; width: auto; height: 6000px;
}

@media only screen and (max-device-width: 1024px) {
    canvas{
        width: 100% !important;
        height: 100% !important;
    }


@media only screen and (device-width: 412px) {
    canvas{
        width: 100% !important;
        height: 80% !important;
        margin-top: -12px;
    }
}

Answer 1

If you want the game canvas to fit within the game div you can use Phaser's built in scale modes. In your boot function you can put code liuke this:

init: function() {
        //Making the screen work in different orientations on different devices
        this.scale.pageAlignHorizontally = true;
        this.scale.pageAlignVertically = true;
        //this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        //If the player clicks outside the game, it continues running - anti-cheating
        this.stage.disableVisibiltyChange = true;

There are different scale modes but it sounds like you want Phaser,ScaleManager.SHOW_ALL or EXACT_FIT

See here to view the documentation on Phaser's scale manager.

Margin div to center both horizontal and vertical

Question

1 answers

solution1
1 ACCPTED 2017-01-04 02:57:01

Margin div to center both horizontal and vertical

Question

1 answers

solution1 1 ACCPTED 2017-01-04 02:57:01

solution1
1 ACCPTED 2017-01-04 02:57:01