Cannot center menu text?

[Thundros]

So I am trying to center my text for my title screen in order to create a clickable menu & be able to control the overall X / Y position of the entire menu yet keeping it centered & adding X / Y offsets to it as well. What am I doing wrong here?

Specifically, line{s} 152 & 153 :

class TitleScene extends Phaser.Scene {

	constructor ( ) {
		super ({
			key : 'title', 
		});
	}

	centerX ( ) {

		return ( this.sys.game.config.width / 2 );

	}

	centerY ( ) {

		return ( this.sys.game.config.height / 2 );

	}

	preload ( ) {
		this.hero = this.add.sprite (
			this.centerX ( ), this.centerY ( ), 'hero'
		);
	}

	init ( ) {

	}

	create ( ) {

		this.__textStyle = [ ];
		this.__MenuItem = [ ];
		this.__MenuOption = [ ];

		this.__MenuItemX = [



		];

		this.__MenuItemY = [



		];

		this.__MenuX = [ 

			0, 0, 

		];

		this.__MenuY = [

			10, 10, 

		];

		this.__MenuItemXOffset = [

			0, 0, 

		];

		this.__MenuItemYOffset = [

			10, 100, 

		];

		this.__WINDOW_WIDTH = ( ( window.innerWidth ) );
		this.__WINDOW_HEIGHT = ( ( window.innerHeight ) );

		this.__WINDOW_HALF_WIDTH = ( this.__WINDOW_WIDTH / 2 );
		this.__WINDOW_HALF_HEIGHT = ( this.__WINDOW_HEIGHT / 2 );

		this.__MenuOption [ 0 ] = 'Press Start';
		this.__MenuOption [ 1 ] = 'Quit Game';

		for ( this.__i = 0; this.__i <= 1; this.__i++ ) {

			if ( this.__i === 0 ) {

				this.__textStyle [ this.__i ] = {
					font : "64px Arial Narrow", 
					fill : "#fff", 
					align : "center", 
					backgroundColor : "transparent", 
					wordWrap : {
						width : this.hero.width * 4, 
						useAdvancedWrap : true, 
					}
				};

			}

			if ( this.__i === 1 ) {

				this.__textStyle [ this.__i ] = {
					font : "64px Arial Narrow", 
					fill : "#fff", 
					align : "center", 
					backgroundColor : "transparent", 
					wordWrap : {
						width : this.hero.width * 4, 
						useAdvancedWrap : true, 
					}
				};

			}

			this.__MenuItem [ this.__i ] = this.add.text (
				0, 0, this.__MenuOption [ this.__i ], 
				this.__textStyle [ this.__i ]
			);

		}

	}

	update ( ) {

		// this.__text.x = Math.floor ( this.hero.x + this.hero.width / 2 );
		// this.__text.y = Math.floor ( this.hero.y + this.hero.height / 2 );

		for ( this.__i = 0; this.__i <= 1; this.__i++ ) {

			this.__MenuItemX [ this.__i ] = ( this.__MenuX [ this.__i ] );
			this.__MenuItemY [ this.__i ] = ( this.__MenuY [ this.__i ] );

			// CAN BE :: { 
				// this.__MenuItem [ this.__i ].width 
					// OR 
				// this.__MenuItem [ 0 ].width
			// }

			this.__MENU_ITEM_WIDTH = ( this.__MenuItem [ 0 ].width );
			this.__MENU_ITEM_HEIGHT = ( this.__MenuItem [ this.__i ].height );

			this.__MENU_ITEM_HALF_WIDTH = ( this.__MENU_ITEM_WIDTH / 2 );
			this.__MENU_ITEM_HALF_HEIGHT = ( this.__MENU_ITEM_HEIGHT / 2 );

			this.__TextX1 = ( this.__WINDOW_HALF_WIDTH );
			this.__TextX2 = ( this.__MENU_ITEM_HALF_WIDTH );

			this.__TextY1 = ( this.__WINDOW_HALF_HEIGHT );
			this.__TextY2 = ( this.__MENU_ITEM_HALF_HEIGHT );

			this.__MenuItem [ this.__i ].x = ( ( this.__MenuItemX [ this.__i ] ) + ( this.__TextX1 - this.__TextX2 ) + ( this.__MenuItemXOffset [ this.__i ] ) );
			this.__MenuItem [ this.__i ].y = ( ( this.__MenuItemY [ this.__i ] ) + ( this.__TextY1 - this.__TextY2 ) + ( this.__MenuItemYOffset [ this.__i ] ) );

			// ( this.__MenuItemY1Offset [ this.__i ] ) + 
			// ( this.__TextY1 - this.__TextY2 ) + 
			// ( this.__MenuItemY2Offset [ this.__i ] )

			console.log (
				' { ' + this.__i + ' { ' + 
					this.__MenuItem [ this.__i ].x + ', ' + 
					this.__MenuItem [ this.__i ].y + ' } ' + 
				' } '
			);

		}

	}

}

Any help is greatly appreciated!