Center game on my website

Hello, this is probably an easy fix but I am having a lot of trouble centering my game into the middle of my webpage. Here are some screenshots. I am trying to put a div around the script so that the game window is centered, but I am missing something and I can’t seem to figure it out.

Hi,
Phaser can handle it, just add this line in your phaser config:

autoCenter: true,
2 Likes

Not around the script. Use just an empty div

<div id='mygame'></div>

and then

new Phaser.Game({
  scale: {
    parent: 'mygame',
    autoCenter: Phaser.Scale.CENTER_BOTH
  }
}); // etc.
2 Likes

The autoCenter stuff worked, but I still can’t do things in the CSS, I don’t think. Like if I wanted to put a border around my game, it doesn’t seem to work.

You don’t see a border, or the border interferes with the centering?

I don’t see a border

Its very easy
inside index.html