By using the Divi spacing options, you can give the column equal top and bottom padding to make the module vertically centered in the column. You can also make the content top-aligned within the column by adding bottom padding.
However, it may be not easy to keep the alignment on different browser widths and you may have to adjust the spacing when updating your page with more content.
Then you might be asking, how to vertically align content without having to worry about that?
In this tutorial, we are going to show you how to make sure the size of the columns will adjust to the size of the column with the most content in the row by using the “Equalize Column Heights” setting in the row settings which have “The Flex” CSS property (Flex Box) that let you set flexible length on flexible items.
And also by utilizing the setting, we will make the content vertically centered in Divi by adding a few small CSS snippets to vertically align the content in any column,
Let’s get into practical, shall we?
Start Making Content Vertically Centered in Divi Column
To get started, you need to create a new page then use the Divi Builder to edit the page. Once you are in the editor select Choose A Premade Layout to start choosing a premade layout.
For this tutorial, we are using the Interior Design Company – Portfolio premade layout for demonstration. If by chance you want to edit an existing page, then you may want to skip this part and proceed to the method part of this tutorial.
Go ahead and select the layout from the Layout Packs. You can use the search function to find the layout faster because Divi has so many premade layouts to choose from.
Once you have the layout loaded in the editor, open the second row or the first of the Case Study Row setting, go to the Design tab then open the Sizing block and you’ll see that the “Equalize Column Height” setting is already active which means the flex property is present on this row.
In this tutorial, we will use 2 methods to demonstrate making content vertically centered in Divi.
Method 1: Make Content Vertically Centered Using Align Item Center and Auto Margin
The first method is by adding a small CSS snippet to the row settings to adjust the margin automatically.
After you make sure the “Equalize Column Height” setting is active in the Row Settings, continue by going to the Advanced tab and toggle open the Custom CSS block. On the Main Element code editor, add the following snippet there.
align-items: center;
As you can see in the above image, the content of the column is vertically centered.
And you can make the other row apply the same snippet to their Main Element CSS so their content will be vertically centered as well by taking advantage of Divi’s “Extend” style feature.
To do so, just hover a bit on the Main Element CSS editor, then click on the overflow icon 
or you can right-click Main Element to show the Extend Main Element option, then proceed to select it. On the appearing window, you will be asked where to extend the CSS snippet to. Let’s apply it to all the rows in the current section by selecting the following option.
- To: All Rows
- Throughout: This Section
Once you did the above steps, you’ll find all the columns are vertically centered.
You may also choose to individually make the column content vertically centered by opening the Column Settings and then moving to the Advanced tab → Custom CSS block to place margin: auto; CSS snippet in the Main Element code editor.
If you want the content to be bottom-aligned or top-aligned you can do so by modifying the margin: auto; CSS snippet as follows:
- Bottom-aligned:
margin: auto auto 0;
- Top aligned:
margin: 0 auto auto;
Method 2: Make Content Vertically Aligned Using Flex Direction
In the first method, you may have noticed the background of the text column shrinking to fit the content. That white background is the background of the second column. So, if you make the row background white instead of the column, the white background will span to the full height of the row, or you can make the background of the page white.
For this method, you can leave the background color as default. By using the flex-direction to align the content of our column, not only you don’t have to lose the flex from the “Equalize Column Height” setting which keeps your column height the same, but also you will keep the background color of the column span to the row height.
Let’s get into how to use the flex-direction, start by opening the Row settings from the previous example and clear any custom code you may have there by right clicking the Custom CSS block, then select Reset Custom CSS Style.
Once the Custom CSS is clear, continue by going back to the Content tab then opening up column 2 settings, then proceed to the Advanced tab and add the following CSS snippet in Custom CSS → Main Element.
display: flex; flex-direction: column; justify-content: center;
Now, you will get the full height of the column background back along with the content is vertically centered also.
If you want to align the content to the top or the bottom of the column, you just need to modify the code snippet a bit, which is the justify-content: center; part. Here’s the example of the modified snippet:
- Top-aligned content:
display: flex; flex-direction: column; justify-content: flex-start;
- Bottom-aligned content:
display: flex; flex-direction: column; justify-content: flex-end;
The Bottom Line
Vertically aligning your content may come in handy if you have some columns and you want to make sure the other column is vertically centered. For example, you may want to have the logos for your sponsor section that have a five-column layout to be vertically centered, or when you want to make sure your download button or CTA button on the other column is always vertically centered.
To streamline your workflow, you can store the above snippet to Divi Cloud. By doing so, you can re-use the snippet on other websites you build with Divi by simply load it from the cloud.
