Vertically Align Modules Inside Rows, and Rows Inside Sections

When you want the Divi section’s content (rows and modules) to be horizontally AND vertically centered within the section, there’s a nice little CSS snippet that gives our sections this absolute centered look. This works really well if you are setting specific heights for sections and rows that relate to the height of the browser window (example: min-height:80vh, or height:100vh).

For those of you who don’t know what vh is, vh is short for viewport height, which is the height of the browser window on whichever device you are on. There’s also vw – viewport width – which is the width of the browser window.  The number before vh or vw represents 1/100th of the vh or vw, so basically 1%. Therefore, 80vw equals 80% of the viewport width, and 100vh equals 100% of the viewport height (covering the full window).

Use the following code to center the content in your rows and sections.

❶   Paste the following CSS to your Custom CSS box

/****** Vertically center rows in sections and modules in columns *******/  
.dh-valign-center-row .et_pb_column, 
.dh-valign-center-section, 
.dh-valign-center-module { 
   display: flex; 
   flex-direction: column; 
   justify-content: center;
}

Vertically and horizontally center a row within a section.

❷A   Add dh-valign-center-section to the section’s CSS classes box.

Vertically and horizontally center a module within the row’s column(s).

❷B   Add dh-valign-center-row to the row’s CSS classes box.

❸   Turn on equalize column heights.

Vertically and horizontally center the content within a module.

❷C   Add dh-valign-center-module to the module’s CSS classes box.

Done!

Give this page a share, like, or comment if this worked for you! Leave a comment if you have a question or want to share some love 😀