{"id":1175,"date":"2020-06-09T17:05:07","date_gmt":"2020-06-09T17:05:07","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=1175"},"modified":"2026-04-02T09:27:48","modified_gmt":"2026-04-02T09:27:48","slug":"vertically-center-align-phaser-game-in-a-div","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/vertically-center-align-phaser-game-in-a-div\/","title":{"rendered":"Vertically Center-align Phaser Game in a Div"},"content":{"rendered":"\n<p>Let say you have a you have defined &#8216;mygame&#8217; as parent in your config<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    let config = {\n        type: Phaser.AUTO,\n        scale: {\n            parent: 'mygame',\n            mode: Phaser.Scale.FIT,\n            autoCenter: Phaser.Scale.CENTER_BOTH,\n            width: window.innerWidth * window.devicePixelRatio,\n            height: window.innerHeight * window.devicePixelRatio\n        },\n        autoResize: true,\n        scene: &#91;Preloader, MainMenu, TheGame, GameOver]\n    }<\/code><\/pre>\n\n\n\n<p>And the HTML is defined as following<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body>\n    &lt;div id=\"game-container\">\n        &lt;div id=\"mygame\">&lt;\/div>\n    &lt;\/div>\n&lt;\/body><\/code><\/pre>\n\n\n\n<p>Define the CSS for mygame as following<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#mygame { \n  margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Let say you have a you have defined &#8216;mygame&#8217; as parent in your config And the HTML is defined as following Define the CSS for mygame as following<\/p>\n","protected":false},"author":5,"featured_media":1539,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,3,4,1],"tags":[],"class_list":["post-1175","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-html5","category-phaser","category-uncategorized"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/comments?post=1175"}],"version-history":[{"count":1,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1175\/revisions"}],"predecessor-version":[{"id":1176,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1175\/revisions\/1176"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media\/1539"}],"wp:attachment":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media?parent=1175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=1175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=1175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}