Centering a Phaser3 Game

Here’s how to center a Phaser3 game on any device.

Step by Step

Add scale to your configuration object passed as an argument when you create your game:

  scale: Phaser.Scale.FIT,
  autoCenter: Phaser.Scale.CENTER_BOTH,

Then add the following to your HTML. (No need for a separate CSS file.)

  html, body {
    height: 100%;
    margin: 0;
    background: #000000;

Now reload and you should have game that fills the screen as best it can and leaves black strips on the edges.

No make it even better turn your game into a progressive web app.