How To Vertically Center Content in Divi

this very basic function should be part already with the builder.

What worked for me was to add the following code to the underlying section: Section Settings > Advanced (Custom CSS) > Main Element and then paste the following code into the code window:

display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

This will vertically center the row contained in a section within the browser's viewport.

Just FYI for all, this technique is no longer valid. After futzing around for 30 min trying this technique, it won't work in the latest version. Its MUCH simpler now. On the Row, click the gear icon (settings) and set Sizing>Equalize Columns = Yes, THEN in the same Row Settings, click CONTENT and for each column (Column Settings) you want to be set, add margin:auto; to the custom CSS for each column. Job done...

thanks, real usefull

Thanks, just what I needed. Divi should add that feature into the builder.

and how can i achieve that the row is centered on the screen? my row sticks on top...

I dont have columb 1 CSS class?

yup , its easy pesy

Thanks for this. Once again I am in awe that this is not a built in feature of Divi. In Elementor it is one of the very first settings one can make for a row, a section etc. But in Divi, yet again: you need to use CSS. What a bummer. I am glad that I have to use this page builder of death only for one client.

Hey Josh!
Unfortunately, I'm trying to use this super handy tip to vertically align my columns, but seems its no longer working on divi's latest update.

Notice divi's latest version is no longer showing separate classes in the Row Advanced Settings. Instead there is now an option to individually adjust entire column settings.

Could you please help post an update?

Thanks for this amazing tip in advance! :)
Cheers

just subscribed because of this tutorial!

I'm so fucking stunned. It worked! It is soooo beautiful. Thanks a lot, Josh. Thank you thousand times!

What?!? All of this to have a vertical align?!?!? Really?!?!?!?

.vertical-align {
display: flex;
flex-direction: column;
justify-content: center;
}

Awesome! Thanks for the help!! This works like a charm :)

Hi Josh, thanks for the great tutorial! Is this still the best way to do this in Divi in 2020? Thanks again!

Why on earth isn't this option implemented in the divi builder already? On switch , like "full-width row" or "equalize column height" ...

Hi Josh! it worked for me in desktop but on mobile it just ignore the CSS, let me explain what I am doing, I have 3 columns and I follow your tutorial to keep those 3 on mobile use width 33%, then I add all the flex CSS to center all these 3 elements, what really confused me is that i can keep the 3 columns on mobile but they are not center and on desktop al the CSS work perfectly, thanks in advanced
My code
.three-columns .et_pb_column{
width: 33.33%!important;
display: flex;
flex-direction: column;
justify-content: center;
}

Thank, Josh. Simple and very useful tutorial.

Thanks Josh! Worked a treat. Nice clear video.