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