Vertically Center-align Phaser Game in a Div

Let say you have a you have defined ‘mygame’ as parent in your config

    let config = {
        type: Phaser.AUTO,
        scale: {
            parent: 'mygame',
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_BOTH,
            width: window.innerWidth * window.devicePixelRatio,
            height: window.innerHeight * window.devicePixelRatio
        },
        autoResize: true,
        scene: [Preloader, MainMenu, TheGame, GameOver]
    }

And the HTML is defined as following

<body>
    <div id="game-container">
        <div id="mygame"></div>
    </div>
</body>

Define the CSS for mygame as following

#mygame { 
  margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);
}

Leave A Comment

Your email address will not be published.