Introduction: Center Vertically Columns in DIVI

Are you struggling to vertically align columns in your DIVI layouts? As a front-end designer, I’ve encountered this challenge numerous times. By default, DIVI aligns columns vertically at the top, which may not always suit your design needs, especially when responsiveness is crucial. However, I’ve discovered a straightforward solution that I’m excited to share with you.

Center Vertically Columns in DIVI

Here’s how to center columns vertically in DIVI

Step 1: Activate “Equalize Column Heights” in the Row Settings:

1. Navigate to the row where you want to center the columns.

2. Click on the “Settings” button for that row.

3. Go to the “Design” tab and select “Sizing.”

4. Activate the option “Equalize Column Heights.”

    Step 2: Apply Custom CSS to Each Column:

    1. Within the Content tab, locate the “Column Structure” for each column.

    2. Click on the settings button for each column.

    3. Navigate to the “Advanced” tab.

    4. Open the “Custom CSS” option and select the “Module Elements” subtab.

    5. In the “Main Element” section, add the CSS rule: “margin: auto.”

    Repeat these steps for each column within the row. Once completed, your columns will be vertically centered, enhancing the aesthetics and functionality of your DIVI layouts.

    Conclusion:

    Don’t forget to check out my personal blog for more insightful articles in both English and Spanish. Additionally, I offer a free course on YouTube in Spanish, where I teach WordPress & DIVI fundamentals.

    Now, with this handy technique in your toolbox, you can effortlessly create visually stunning and perfectly aligned DIVI layouts. Happy designing!