How do I move Phaser.Game to the center of a browser?

Question

I'm new to JS/phaser and just create a Phaser.Game with

var game = new Phaser.Game(600, 490);

The game is created top left but I would like to have it placed in the center of a browser.

I checked the API and nothing looks relevant:

new Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)

Could someone tell me how do I do so?

Answer 1

Using Laravel 8 and [email protected]

The solution found here worked for me. The other answers provided in this thread did not (but did point me in the correct direction).

canvas {
display : block;   
margin : auto;
}

Answer 2

Thanks to this link provided by @FedericoklezCulloca.

add

game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.scale.refresh();

to function update and the Phaser.Game will be in the middle.