# Centering ## Introduction Gum provides simple controls for centering objects inside of their parents. This page shows how to center objects in a variety of situations. For brevity this document uses vertical centering, but the same concepts apply to horizontal centering. ## Centering with Anchors (Alignment Tab) The easiest way to center an object is to use the center **Anchor**. This sets all of the values necessary to center an object both vertically and horizontally.

## Centering Using Units Objects can be centered by setting their unit and numerical values. The **Alignment** tab is a shortcut for these values, but we can assign each value individually so an object is centered vertically: * Set `Y` to `0` * Set `Y Units` to `Pixels from Center` * Set `Y Origin` to `Center`

Centering using `Y`, `Y Units`, and `Y Origin`

## Centering with Margins Centering can be performed with margins by adding an additional container to create the necessary margins. For example, consider a situation where we want to center the green rectangle inside the blue rectangle, but leave a 32 pixel margin at the top. We may want something similar to the following image:

Green rectangle is centered in the remaining area below the yellow area

To do this, an additional container can be added as shown in the following image:

Container inside the blue rectangle defining the centering space

In this case, the container has the following relevant properties: * `Y` = `0` (so it is pressed against the bottom) * `Y Units` = `Pixels From Bottom` (so it is bottom justified) * `Height` = `-32` (leaving a 32 pixel margin) * `Height Units` = `Relative to Parent` (so that it always has a 32 pixel margin regardless of parent size) The green rectangle can be added as a child to the container, and then centered within the container. This results in the green rectangle always being centered within the area that leaves a 32 pixel margin at the top even if the main rectangle is resized, as shown in the following animation:

Blue rectangle resized, keeping the green rectangle centered within the area leaving a 32 pixel margin at the top

Additional margin can also be added to the bottom by changing the container's Y value. For example, a 20 margin border can be added at the bottom, leaving a 32 pixel margin at the top by setting the following values on the container: * `Y` = `-20` (move the bottom of the container up by 20 pixels) * `Height` = `-52` (leaving a 32 pixel margin at the top, and accounting for the container being moved up an extra 20 pixels)

Centering leaving an extra margin on both top and bottom

## Center Stacks Stacks can be centered horizontally or vertically. To center a stack of objects, an internal container is needed. A centered stack might look like this:

For this example, we'll begin with a Container and a background ColoredRectangle. The background is not necessary, but it helps visualize the main Container's size.

MainContainer with a blue ColoredRectangle background

Next we'll add another container which will hold our stacking instances. 1. Drag+drop a container onto the MainContainer 2. Click the Alignment tab 3. Click **Anchor Center**

We can add children to the container: 1. Set the inner container's `Children Layout` to `Top to Bottom Stack` 2. Drag+drop children onto the inner container to have them stack 3. Optionally adjust the `Stack Spacing` variable to add gaps between the children 4. Optionally adjust the children such as changing their size or color

For this example I modified each child rectangle to have * Width = 128 * Height = 32 * Color = Green

Finally, we mark the inner container to be sized according to its children. Since it remains centered, whenever its size adjusts (by adding or removing children), the inner container adjusts to remain centered.

Set the inner container to Size to Children

Now if children are added or removed, the container remains centered.

Inner container expanding in response to new children

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.flatredball.com/gum/gum-tool/tutorials-and-examples/examples/centering.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.