Elements on the web can be horizontally centered quite easily within their parents -- in fact they'll do so by default, and if you'd prefer to float them to the left or right, you can do so with a single click via the Alignment Panel.

Vertical alignment is a bit trickier. This may seem counter-intuitive, especially for those coming to web design from using print design tools such as Illustrator, where height and width aren't functionally treated differently from one another. This is another example of how browsers prefer to be agnostic about the heights and vertical positioning of things -- a consequence of the fact that websites must flex with the width of the browser window, causing the height of their content to "flow" as a result.

It is possible to vertically center content in a parent element, though -- and it's actually quite easy; it just requires a couple more steps.

1. Absolutely position to the parent. Whatever you're trying to vertically center -- a text box, a container, and image -- will need to be absolutely positioned within its parent element first. (Use the Positioning Panel.)

2. Set position to 50% from the top. Still within the Positioning Panel, enter "50%" into the "top" input. This will push it down to a vertical position that's halfway down the parent. However, this means that the top of the element will be halfway down; to truly vertically center it, you'll probably still need to adjust it so that the center of the element is halfway down. So, finally...

3. Apply -50% vertical translation. Push the element back up a bit so that its center is vertically centered (rather than its top.) Open the Transform Panel and apply a transform-y of "-50%".


Now your element will be vertically centered within its parent, and if its height changes, it will automatically adjust its position so that it remains that way.

For a more detailed step-by-step, here's a demonstration:

Did this answer your question?