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.
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.