<div id="container">
  <div id="phaserdiv"></div>
</div>

#container{
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: center;
  align-items: center;
}

class MainScene extends Phaser.Scene {
  constructor(){
    super('mainScene');
  }

  preload(){
    this.load.image('ball', 'assets/sprites/shinyball.png');
    this.load.image('crate', 'assets/sprites/crate32.png');      
  }// End preload

  create(){
    // Player
    this.player = this.physics.add.sprite(20,20,'ball')
        .setCollideWorldBounds(true)
        .setBounce(1)
        .setVelocity(100,100);
    
    // Enemies group
    this.enemies = this.physics.add.group();
    
    this.enemies.create(100,100,'crate')
        .setImmovable(true);
    this.enemies.create(200,200,'crate')
        .setImmovable(true);
    
    // Collider
    this.physics.add.collider(this.player, this.enemies);
      
  }//End create

}// End class

var config = {
    type: Phaser.WEBGL,
    width: 300,
    height: 300,
    parent: 'phaserdiv',
    physics: {
      default: 'arcade'
    },
    scene: [MainScene],
    loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  }
};

var game = new Phaser.Game(config);