In this step by step tutorial, you’ll learn the custom CSS you need to vertically center any piece of content using the Divi theme and page builder. This beginner tip is easy and will make a huge difference on your WordPress website layout!
Updated: January 6, 2020
The Divi Theme and Page Builder allows for so much customization but like all tech tools, it has it’s limitations. One limiation I found and searched high and low for a solid solution for was vertically aligning content. This could be vertically aligning a row within a section, an entire column, or just text within a module.
When I first started designing and building websites on WordPress using Divi, I was so frustrated when I couldn’t get content to vertically align. All I wanted was for the content in two columns to be centered, not from right to left but from top to bottom.
I added an image to a column on the left side of the page and text to a column on the right side of the page. Both of these pieces of content started at the top of the row which meant the image took up the whole screen top to bottom and the text only took up half the screen top to bottom.
It looked terrible! After spending hours Googling “how to center content in Divi,” finding mostly information on how to center content left to right instead of top to bottom, and reading or watching a bunch of tutorials I finally found something that worked.
You don’t need to go through the same trouble I did to figure out how to do something that’s so simple but that makes a HUGE impact on the visual appearance of your design. I’m sharing the exact steps with you today!
From This to That
To ensure you really understand what I mean by my super technical terminology: top to bottom, not left to right (that’s advanced web development speak, right?) here’s an example of content that has been added to two columns in Divi but HAS NOT been vertically aligned (top to bottom).
You can see the image and text are top aligned. Below the text is white space.
Below is the same content after it HAS been vertically aligned (top to bottom) using the CSS below.
CSS to Vertically Center Content in Divi
Here’s what you need to do!
First you need to add a bit of CSS to the Custom CSS field in Divi.
- Go to the Dashboard page of your WordPress website
- Hover over Divi in the left-hand menu
- Select Theme Options
- Scroll down to where you see Custom CSS
- Paste the code below into the Custom CSS field and press Save
Now enable the visual builder on the page where you want to vertically center content (top to bottom).
- Open the Row Settings
- Go to the Design tab
- Click Sizing
- Make sure Equalize Column Heights is set to YES
- Go to the Content tab
- Click the Gear icon next to the first Column
- Go to the Advanced tab
- Click CSS ID & Classes
- Paste ds-vertical-align into the CSS Class fields
- Click Save
- Repeat steps 6 – 10 for each of the Columns in the Row
Your content should now be vertically centered (top to bottom).
Want more Easy CSS and HTML Tricks?