To vertical centering elements like modules, columns and rows can create a harmonious look and feel to your Divi website. 

Here are three different methods to center elements vertically in Divi:

1. Vertically center single modules (without CSS)
2. Vertically center multiple modules in one column (with CSS)
3. Vertically center modules in multiple columns (with CSS)

Here we go!

But why not just adjust the top margin?

As tempting as this quick-fix might sound, it’s not a solid solution to center elements vertically by playing around with margins in the Divi Visual Builder.

The reason for this is the responsive design framework. One top margin value, for example 250 px, might look perfect on your particular screen. But on other screen sizes, the elements will resize to fit within the viewport width, while the top margin remains fixed. Fuzzy? The screen recording below will clarify the issue.

So let’s try some 100% responsive tricks that will work regardless of your visitors screen size instead.

1. Vertically center single modules (without custom CSS)

After

In this example we have one row with the columns. We have a tall image in the first column (hello beautiful monkey!) and a text module in the second column.

Note: This method will only work for vertically centering single modules since multiple modules in the same column will overlap.

Center elements vertically by using Position Absolute

To vertically center the smaller object (the text module) we will use the Divi Builder Position options:

1. Open the Row settings by clicking the cogwheel
2. Go to the Design tab
3. Click Sizing and enable Equalize Column Heights
4. Close the Row settings and head over to the Text Module settings
5. Open the Design tab
6. Open the Advanced tab
7. Click the Position tab and set it to Absolute

Change the tablet and mobile position

The two modules are now vertically centered in desktop. Now we must change the Position settings for the Text Module for mobile and tablet to avoid overlapping:

1. Hover the Position Absolute area to display additional options
2. Click the Smartphone icon to open the Responsive design settings
3. Click the Tablet icon and change the Position from Absolute to Default. The Tablet settings will be inherited to the Smartphone settings by default.
4. Save and preview in fronted.

2. Vertically center multiple modules in one column

After

If you have two or more modules in the smaller column we need to use some custom CSS in order to center the elements vertically. In this case, we will combine Equal Height with margin:auto.

Center elements vertically by using margin:auto

To vertically center the smaller column objects (the text module and the button module) we will use the Divi Builder Position options + a CSS snippet.

1. Open the Row settings by clicking the cogwheel
2. Go to the Design tab
3. Click Sizing and enable Equalize Column Heights
4. Head back to the Rows Content tab and click the cogwheel for the Second Column
5. Click the Advanced tab and open the Custom CSS tab
6. Paste the snippet below in the Main Element field:

   margin:auto;

7. Save and preview.

That should be all. You don’t need to do any special settings for mobile devices in this case.

3. Vertically center modules in multiple columns

After

If we have multiple columns in one row it’s time consuming to use margin:auto in each column. In this example we have one row with four columns with one Image Module in each column.

Center elements vertically by using align-items:center

To vertically center the logos we will use Equalize Column Heights and align-items:center:

1. Open the Row settings by clicking the cogwheel
2. Go to the Design tab
3. Click Sizing and enable Equalize Column Heights
4. Head back to the rows Content tab
5. Paste the snippet below in the Main Element field for the Row:

   align-items:center;

6. Save and preview.

The settings will also be inherited for mobile devices. In this case, Divi will display two columns side by side in tablet (which will also be vertically centered). In mobile, you will not see any difference since there will only be one column per row by defaultß.

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: How to Vertically Align Content in Divi (by Elegant Themes)

👉 Free course: Create a website from scratch with Divi