How to Center Grid?

Question

Hey everyone So I have created a grid on stage using the code below. Everything works fine and the grid is created. Only problem is when i change the columns and rows value to a higher value the grids position changed offset to the center of the stage. I want it to be when i change the values and more columns etc are added the Grid stays dead center.

Also it seems that the grid expands to the positive x axis from the top left hand corner of the grid.

What can I do to fix this?

public function geniusMatchEngine() 
    {
        //Instantiate Variables
        nSquares = 0;
        //Movie clips
        _gridContainer = new MovieClip();

        stage.addChild(_gridContainer);

        createGrid();

        //Add Listeners
        stage.addEventListener(Event.ENTER_FRAME, logicHandler);
    }

    private function logicHandler(e:Event):void 
    {

    }

    private function createGrid():void 
    {
        for (var gy:int = 0; gy < rows; gy++)
        {
            for (var gx:int = 0; gx < columns; gx ++)
            {
                var _grid:mcGrid = new mcGrid();
                _grid.x = (stage.stageWidth / 2) + _grid.width * gx;
                _grid.y = (stage.stageHeight / 2) + _grid.height * gy;
                _gridContainer.addChild(_grid);
                _grid.addEventListener(MouseEvent.CLICK, tapGrid);
            }
        }
    }

    private function tapGrid(e:MouseEvent):void 
    {
        trace("CLICKED");
        e.currentTarget.destroy(); //Destroy current target
    }

    private function centerGrid(gCenter:MovieClip):void
    {
        gCenter.x = (stage.width / 2) - (gCenter.width / 2); // center horizontally. 
        gCenter.y = (stage.height / 2) - (gCenter.height / 2); // center vertically. 
    }

Answer 1

To center something on the stage do:

private function centerThis(s:<Type>):void{
    s.x = stage.width / 2 - s.width / 2; // center horizontally. 
    s.y = stage.height / 2 - s.height / 2; // center vertically. 
}

Then with your grid you can do:

centerThis(_grid);

Note: make sure to replace <Type> with whatever makes sense. In this case it could be mcGrid but to make it more generic so you can use this function on any movie clip or Sprite use MovieClip or Sprite.

update

Since you seem a little confused about scope, I'll use your specific case as an example.

//Variables
    private var rows:int = 2;
    private var columns:int = 2;

for (var gy:int = 0; gy < rows; gy++)
        {
            for (var gx:int = 0; gx < columns; gx ++)
            {
                var _grid:mcGrid = new mcGrid();
                _grid.x = (stage.stageWidth / 2) - _grid.width / 2;
                _grid.y = (stage.stageHeight / 2) - _grid.height / 2;
                stage.addChild(_grid);
            }
        }

I thought the _mcGrid was a prefabricated grid. I'm now seeing that it is probably just one cell in the grid (maybe change the class name to _mcGridCell... less confusing). Forget trying to place the cells relative to the stage center. Add them to a parent Sprite (or MovieClip if you prefer) and then center that Sprite (movieClip) with my centerThis formula. This is the beauty of display object containers.

update

Ok. When you center the grid container, everything in the container goes with it. So no need to also try to center the cells in the grid as you have done.

grid.x = (stage.stageWidth / 2) + _grid.width * gx;

should just be

grid.x = _grid.width * gx;