Elements on the web can be horizontally and vertically centered quite easily within their parents, and you can do so with a single click via the Alignment Panel.

There are some instances where vertically centering via the Alignment Panel won't work, like when you only want one element in a parent container to be vertically centered instead of everything. In those cases, you can follow the steps below and learn of another way to vertically center content.

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: