How to vertically center your content within a Container element or Image Element
Sometimes you want to vertically align content in a column. The best way to do this is to make use of the Vertically Center Content option that is available on the Container Element.
Once you have added a container into a page, you can select to vertically align this content in the top, middle, or bottom of the element.
Then simply drag any elements into this container, and you'll see that they vertically center when the alignment option is set to "Middle."
In the image below you will see the vertically centered content on the left, and content this is not vertically centered in the same size container on the right.
Controlling the Container Height
When vertically aligning content within a container, you may also want to adjust its height. There are two ways to do this:
If the Container is nested within Columns, select the Columns element then enable the "Equal Column Heights" toggle in the columns's main style settings. This toggle will cause the container's height to match the height of adjacent column context. (For this approach, we recommend placing a single Container into each Column, then place the content elements within each column's container.)
Use the "Min Height" field in the Container's Dimensions settings to set a minimum height on the container element. The content within the container will then be centered based on the set minimum height.