How to Make a Row Vertically Centered in Divi Section

Updated: October 17, 2022

Most page builders, including Divi Builder, already support CSS flexbox to allow users to set the alignment of the elements of a container. For instance, you can set the container’s elements to be horizontally centered, vertically centered, at the bottom of the container, at the top of the container, and so on. In the context of page builder, container can be a section, row, or column.

The concept of flexbox is pretty useful in web design. Especially in the era where designers are required to create a responsive page.

Although the vast majority of page builders already support CSS flexbox, the implementation is quite challenging in some page builders. Unfortunately, this includes Divi Builder. In Divi Builder, adding custom CSS is required to use CSS flexbox.

Say you are designing a page with Divi Builder. On the hero section (the top section), you set the section to be fit to screen. The section contains only one row and you want the row to be on the center of the section. In such a case, you can implement CSS flexbox.

How to Make a Row Vertically Centered in Divi Section

First off, select a section you want the row of to be vertically centered. Click the gear icon to edit it.

On the settings panel, go to the Advanced tab and open the Custom CSS block.

Paste the following CSS snippet to the Main Element field.

The code:

display:flex;

That’s it. Your row should now be in the center area of the section.

The Bottom Line

Flexbox is a CSS feature aimed at making it easy for web designers to set the layout of the design elements. With flexbox, you can set the alignment of multiple elements on a container based on the viewport size. Divi Builder is a page builder that already supports CSS flexbox. However, you need to add CSS code to implement CSS flexbox in Divi.

You can implement CSS flexbox to set the alignment of the elements on your Divi design. One of which is to make a row of a section vertically centered as we have just covered above.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Divi.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.