Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
Something I see asked so often and is actually really simple is how to vertically center content. Like when you have some text next to an image but the text doesn’t fill the whole space, you want it to sit in the vertical center of the column rather than at the top.
You can do this with padding to an extent but this can throw your layout off on smaller screens if you don’t add some media queries and of course FireFox doesn’t always play nice with percentages which you need to use for responsiveness.
Adding a custom CSS class to your stylesheet means you can vertically center any content in a matter of seconds.
So let’s get cooking!
Cooking time
This should take you around 3 minutes max.
Preparation
Let’s set up a section.
Add a new standard section with how ever many columns you want to use for your layout, I am using four in this example.
Then open up the row settings and in the Advanced Settings tab set Equalize Column Heights to Yes. Then Save & Exit.
Method
Now add your modules and content to the row, you can use pretty much anything. Here is a rough example. I am using image, text, blurb and button modules and as you can see, all the content is aligned to the top.
Next, go back into your row settings and in the Custom CSS tab, add the class ds-vertical-align to each of the Column CSS Class fields you want vertically centered. I have added to all four columns here but you don’t need to if you don’t want to. Then Save & Exit.
Now for the CSS, add this little snippet to your child theme stylesheet, Divi options custom CSS box or the page specific CSS box. I would advise adding this to your child theme stylesheet so when you want to use it again all you have to do is add the class to the relevant columns and switch on equalize column heights in the row advanced settings.
.ds-vertical-align {
display: flex;
flex-direction: column;
justify-content: center;
}
Now your content should be nicely aligned to the vertical center like this:
And that’s it. No more messing with padding and media queries to vertically center your content!
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 
Michelle X
Why does this not work in the module’s Main Element CSS? For example in the Blurb module to vertically align an icon.
That element may require different code. And you can only add properties and values in the advanced tab, not selectors.
Michelle,
Thank you for this solution. In DIVI, is there any easy way to ‘center’ a Row (of x number of columns) in a Standard section?
I’ve tried setting the margin: auto; in each of the rows and that hasn’t worked. Someone suggested I use—padding: 0 50%;— and that didn’t work. That just made my rows disappear completely. I tried changing the display properties to ‘block’ and then ‘inline-block’ and that didn’t center the 4 rows of 4 columns each. I’ve been struggling for 3 days with this.
Any help will be greatly appreciated.
Thanks,
Mario Salinas
There is a setting in the design tab to center the row
Thank you so much for this tutorial!!!!!!!
Hi, this solution works great for all browsers but not in IE11.
Sorry be we do not support IE at all, it is deprecated.
Hi Michelle,
I have a situation where I need to center an entire section on a page and have it be centered on all devices etc. How’s the best way to do this?
You can use this in your custom CSS or the advanced tab of the section:
display:table;
margin:auto;
Hi
In one row it is working nice, but the other row it is not working: https://www.villamullioncove.com/rooms/
What I have as additional code, that it should change the order (flip) the columns… on smartphones:
/***Switch column order on mobile***/
@media only screen and ( max-width: 980px ) {
.flip {
display: -webkit-flex;
-webkit-flex-direction: column-reverse;
display: flex;
flex-direction: column-reverse !important;
justify-content: center;}
}
Not sure if this makes problems,
Regards,
Simon
This looks correct on my end – if it isn’t, please tell exactly which section is the problem
Michelle,
The ‘align center’ CSS works great. Thanks for the tip. Are there CSS variables to ‘top’ align all columns or ‘bottom’ align all columns?
Yes, in justify-content, switch the values to flex-start or flex-end
I think I love you. This is amazing! Thanks for the help
Haha thanks Sam
I recently came upon your blog and totally love it, find it very helpful and smart.
Thanks so much for sharing your knowledge and experience.
Hi Michelle :D!
Since my message from January 15, 2017, I’ve found an other and cool way to easily vertical align items in rows :).
For that, you have to add this CSS rule to your child theme stylesheet or in the field “Custom CSS” in Divi options:
.et_pb_equal_columns >.et_pb_column {
margin-top:auto;
margin-bottom:auto;
}
Now, everywhere in your website, if you want to vertical align something, you just have to set “Equalize Column Heights” to “Yes”, save & Exit and let the “magic” works ;)…
All the best sweet Michelle :D!
Pierre.
Awesome global solution Pierre, thanks for sharing
Superb! Thanks for that, both of you. Worked a treat.
Ok, it worked but only if I place the snippet directly as a custom CSS i.e. placing the class into my child theme does not work…strange :/
Umm. Is it just me, or is this HORIZONTAL alignment, not vertical? Am I missing something. The horizon ———————– i.e. horizontal.
It’s just you. If you read the entire recipe and view the example image at the bottom perhaps it will help you understand it better.
This works beautifully with four columns on all screen sizes. Thanks!
But four some reason I can’t make it work with three columns. On screen sizes above 980px it works as expected. But on smaller than 980px it breaks. Content is top aligned. I can’t figure out why, but my best guess is that the setting equal column height seems to be ignored. Is this maybe a Divi issue or am I missing something here…
If you have a link I can take a look
Heya – was there ever a solution to the 980px break point issue? (i.e. it breaks on mobile and reverts to top alignment).
This does work on mobile, but extra spacing is removed on mobile devices because it is not necessary.
Does anyone know if this can be used on a front page slider? Images in sliders are in the background of course but there must be a way of vertically centre them (particularly when responsiveness is involved!).
Yes the content can be centered with flex but the selectors will be different as you are aligning content within a module
Nice, worked as promised. Thank you.
Is there a way to vertically center a single module rathan entire column? Thank you.
In that case you would want to center the content within the module rather than the module within the column. You would need to find the module selectors and apply the CSS there rather than the column
Thank you, Michelle!! Works perfectly. Big smile on a Dutch face
Thanks Rob, glad it helped
How would you do that when you have more than 1 item per column? Let’s say the 2nd column has 2 text modules
The code should still work as it is aligning the column content
Thank you Michelle, just what I needed!
Fantastic! Very simple to follow.
You save my day, and hours of my time, yet again. Thank you!!
Thank you so much! Precious minutes saved thanks to you!
Awesome, you certainly saved hours of my time. Thanks for the quick tip.
Welcome
This was very clear, and I am able to do everything except I don’t know where to put the css code. I am very new to this, and do not understand this part: “Now for the CSS, add this little snippet to your child theme stylesheet, Divi options custom CSS box or the page specific CSS box.”
What is a child theme stylesheet and where do I find it?
Or, where is the custom CSS box?
Go to Divi > Theme Options > General and scroll to the bottom, paste the code in the Custom CSS box there
I love you girl, you make my middle night… Thanks a lot
Haha most welcome
Worked great! Even better than the support I received from ET regarding vertical centering.
That’s great to hear Kevin, thanks
This was great! Thanks for the easy tutorial.
Hi Michelle,
is there a away to not just center content, but also equalise the height so the grid is automatically perfect? see http://www.danskelokaliteter.dk
In order for the columns to display at the same height, you need to place your image or background colour in the column settings rather than the module
You just saved the day. Thank you!
Glad to hear it, and you’re welcome
This was so so helpful. I can’t express how much this little snippet has already helped me!! : ) Thank you, thank you!!
That’s great to hear, thanks Heather
Hi, This has worked great for me, but I recently noticed that when I applied to this two a row with one column housing an image module and second column with a blurb module, the image proportions get distorted on mobile devices. Any suggestions how to fix that?
You need to place the image as a background to column 1 in the row settings and the image will adjust as you need it to.
Thanks fro the article.
I think you mean “columns” not “rows” at the top of the article:
“Let’s set up a section.
Add a new standard section with how ever many **rows you want to use for your layout, I am using four in this example.”
Absolutely right, thanks! I have edited
I was hoping for there to be a non-CSS way to do this, but I guess whatever shortcomings Divi has always needs to be fixed with CSS. At least this CSS is very simple and straightforward; thanks a lot.
Thanks for the trick, but i realize that it doesn’t work on IE.
But I have figured it out. When you assign the equalize columns in your row, please add a class “align-items-center” to that row.
Then add the following CSS:
.align-items-center {
align-items: center;
}
Nothing works in IE
There is frequently a work around to be applied but I do not design for or support IE at all 
Thanks for posting your solution, sure it will help some.
Oh dude, thank you Lee Ping! Our sites have to pass a stringent QA process which includes IE. Thankfully your fix will help our creativity avoid the crappiness that is the IE browser.
HI..
Having trouble with this one – I use this awesome feature on all of my sites, but on this one, when I add the code, the content seems to drop down to the bottom of the page, not the center.
I have equalize column and the CSS code is set in my Custom CSS. Is there anything that you see that I’m missing?
https://woodburymagazine.net/bcrf-2017/
Whereabouts on the page David, I can’t see it?
This doesn’t work for me… Followed it to a T.
Need a little more info and a link to take a look at in order to find what the issue is Jeremy
Hi everyone, if the code is not working on your site, try using CSS fallback for better cross-broswer compatibility:
.ds-vertical-align {
display: flex;
display: -webkit-flex; /* Safari */
-webkit-flex-direction: column; /* Safari 6.1+ */
flex-direction: column;
-webkit-justify-content: center; /* Safari 6.1+ */
justify-content: center;
}
Hi Michelle,
I have implemented this code to center text and image vertically, but mysteriously it won’t work. Could you please advise where to look at?
test site is here: http://www.inovationpark.com/tech_animation/
All the best,
Mario
I don’t know where on your page you are trying to get this to work but two things to check.
Make sur you have equalise columns on and also if you are aligning text horizontally, do this in the wysiwyg editor and not the module settings.
Hello,
Thank you for your reply. I was trying to do like you said, but couldn’t get the result… However, guys from ET support helped me yesterday to solve it.
Thanks again,
Best!
Mario
Hi Michelle,
I’m not sure what I’m doing wrong, I can’t seem to get this working in the sections under ‘services’. *pulling hair out*
Without a link and can’t help much but two things to check
Make sure you have equalise columns on and also if you are aligning text horizontally, do this in the wysiwyg editor and not the module settings.
“vertical-align” is a property, you should not use exactly the same phrase as your own name. Maybe it’s better to learn how to code properly before giving advise. Sorry for poor english, i try to help.
Maybe you should learn to read properly. Check the code again and see that the class is prefixed with ‘ds’ as in .ds-vertical-align as is all my code before you come and anonymously insult me on my own website.
Michelle, Thank You. One problem I keep running into is placing text (say, 2 lines ) next to an image and trying to get the image and text aligned vertically. Generally I do ok when everything is left / right aligned within the text box. But when I center the text and image within the text box module, the image either sites above ,between, below the text lines. I’ve played with a variety of html /css coding which sometimes works and sometimes doesn’t. any suggestions?
Yes this is common, its to do with how Divi is centering the image when you use the switch option within the module settings. Instead leave that at left aligned and center using the paragraph alignment option within the text editor.
Thank you!
This is awesome. Thank you!
works like a charm. I always get stuck with css so this post came it just at the right time. thank you for sharing!
Very Thanks a lot.
It’s that exactly i need !
I freaking love this! It works great in Safari, Firefox, Chrome for me. But, just had to disable it because the client is using Internet Explorer. Ugh… I know, I know… old browser. What a shame, it looked beautiful, but I couldn’t get it to work with IE at all. Even by adding “display: -ms-flex;” to the code, which I thought would make it work. Anyone else run into this?
Yes IE is a pain indeed! Direct your client to this article
https://www.microsoft.com/en-gb/windowsforbusiness/end-of-ie-support
If the version being used is IE11 you may ant to check the know issues to see if you are also using any of the properties which may cause a problem: https://caniuse.com/#search=justify-content
Hey, thx so much! Great tip! Have one more question for you…is there a way to center align columns within a row? I have two rows in a section….one has three columns and the other two. Within them there are bulleted lists. Would like to have the three and two columned rows center aligned. Is there an easy way to do that?
It’s the “About Camps” section on this page: http://www.fcagolf.org/camps/tobymac-camp/
Thx again!
The reason for this is because you have 3 columns in the first row and 2 in the second, so the width of the modules is wider in the second row.
You may want to try, instead of using multiple columns in the builder, use a single column and then the ET column shortcodes within that single column to better align your content
So slick! Thanks.
Hi Michelle,
My website is currently under construction and i was wondering if it could work on a fullwidth section with the fullwidth header extended ?
For now, i use margin depending the screen, but it doesn’t work well
Thanks !
Sorry I am not clear on what you want to do. And if you are using a plugin then there may be code inside which prevents this from working
Hey Michelle,
Im following the instructions. equalized columns and copied the css to no avail. Im trying to do it on the hero section of the site
http://www.taylormadefitting.ca/
Any idea why its not working in this case?
thank you
I don’t actually see the code anywhere in your section, however it is looking vertically aligned to me
Hi Michelle,
Somehow this is not working for me. What I’m trying to achieve is this. 2 column row. 1st column has a background image and an image module. The 2nd column has an image module. I want to have all the images on the bottom of the section, no space so I set the bottom padding to 0 and removed the space below images (images modules). With your code the images stretch vertically and are not bottom aligned. Can you help me out?
Cheers,
Jaap
Jaap this code is to vertically align the items, not position them to the bottom. I am not clear what you are really trying to achieve?
Hey Michelle, I love this recipe. Unfortunately for me, it’s working in Chrome but not in Firefox or Microsoft Edge. I’m running current version of Windows 10. U can take a look here. http://lapurisima.net/sacraments Any ideas?
It looks to be working fine for me in all browsers, caching perhaps?
Thank you. Very nice and simple
Good stuff Michelle.
Maybe make a video/screenshot how to do it on the fly, by just popping in css into a setting – without having to define a class.
A wee bit quicker and dirtier for “setting junkies”.
But your way is ideal for repeat usage.
Thanks for the suggestion Kenn, will add it to the list
Useful info.
But if module alignment is set to center, this does not work.
I had to set to left align.
Correct, you can use the center alignment option within the content area though
FYI,
You need to add align-items: center in order to make IE compatible
Good tip thanks, I don’t design for IE though
This. Is. AWESOME!
I use this vertically centering method often in bios for client sites. It makes it easy for me to have their picture, then a bio to the right vertically centered. It’s helped me become a better web designer.
Thanks!
PS: I love to cook, so your name really hit home with me!
Mmm, Divi soup!
Thanks so much Joshua
I fucking love you xx
Thank you!
You. Are. FREAKING AWESOME! I first learned about you on Divi Nation. Then, I do a search for how to vertically center content in Divi and BAM. There you are! This line of CSS worked FLAWLESSLY on a client site of mine.
THANK YOU MICHELE!
Most welcome Joshua and thanks for listening to the podcast
Michelle == Just FYI: I followed your instructions to the letter, but can’t get this to work. The text-to-be-centered remains at the top of the Text Module. I double-checked everything, and even removed all other custom CSS from my child-theme style.css file to make nothing there was interfering. No dice. Latest Divi version. Latest Firefox browser version. The Row to be centered vertically is in a Special Section (with Sidebar Module on right) rather than a Standard Section as described in your instructions. So I tried using a Standard Section instead. Still a NoGo. I read through the user Comments,… Read more »
Have you equalised the columns in the row advanced settings?
Hello, thanks for your code. I used it many times, but since the last update of the divi builder isn’t working very well… I mean the content is going down (isn’t center vertically but is bottom). Do you know if is it normal or if we can doing that with an other solution ?
I can’t show you because my 2 websites with this problem are in building.
Thank you
Its working fine for me so I really would need a link
AMAZINGLY HELPFUL. Thank you, Michelle.
Do you write all the articles on DiviSoup? I hope so. I just subscribed to DiviSoup.com after reading this surprisingly clear and concise how-to. I actually ENJOYED working through your article.
And I’m reading your “Faked Boxed Layout” article in another window.
Too good.
Thank you Tom
, yes I write everything. I have one guest post but the rest is all me 
Thank you, Thank you, Thank you
Most welcome
Nice tutorial and I believe I’ve done everything correctly but text still not vertically centered in boxes on home page.
Have you enabled ‘equalise column heights’ in the advanced settings?
Or if you are center aligning items horizontally, don’t do this with the module settings as that will break it, use CSS and I will try to find the time to fix that soon
Hi Michelle, So sorry about the delay in replying, got distracted!
Yes, I have ‘equalise (ok equalize, I am a Scot living in USA) column heights’ selected in the advance settings.
http://www.newcottagedorm.com
I can’t access that page Ron
Also, if you have the text alignment set to center within the module settings, remove that and center your text using the text editor in the content area
Oops! My fault, should be http://www.newcottagedorm.org/
I have text alignment set to left within the module settings and have the text centered using the text editor in the content area.
Thanks,
Ron
I see you have the ds-vertical-align class applied but I don’t see the CSS anywhere, check this is added, when I add it in dev tools it works fine
All set! Thank you Michelle.
Hi Michelle.
Great resource – thanks
I’ve run into a similar problem mentioned above. On the top banner at https://webupwd.com.au/free-help-and-resources/
If I left justify the text, it works fine. If I centre the text through the text module, it gets pushes to the bottom of the div.
Did you discover an easy fix ?
Thanks
Center aligning with dev tools is working fine for me. Perhaps try using CSS rather than the Divi module settings to center align?
I tried to solve this problem with ‘vertical-align’ and it didn’t work. This does the trick. Thanks!
Thank-you so much. As usual you saved me a nice chunk of time. The reason I love DIVI so much is because of people like you, doing stuff like this.
Thanks so much David that is very kind, glad this was useful for you
Hi Michelle, this type of info is exactly what I’m looking for as I just started using the Divi theme. Unfortunately, I am unable to get my rows to align after following your steps. I added the necessary code into the row CSS Column Classes. And then the other snippet into Additional CSS via Appearance>Customize. Did I misstep somewhere? Link to site is maidsfrommars.com. Thank you!
Hey Ty, I don’t see the CSS or the custom class on your site, are you sure you have entered the classes correctly in the columns without the leading dot?
Hey Michelle, I had deleted everything and worked on building other parts of the site. I just went back to it, though, and went over the steps again. It appears I didn’t pay enough attention and missed the “Equalize Column Heights” portion. I made that change, added the CSS Class changes in the row modules, and put the needed snippet into Appearance/Customize. My rows realigned, but instead of being center, my left column is aligned with the bottom of the right column.
Which section are you trying to align Ty?
Currently rebuilding our site in Divi and can’t wait to go live. This code worked like a charm. Thank you!
Glad it was helpful Andy
I found out that eventhough it works ok for centering vertically an image, it has the problem that the horizontal alignment is lost and now the image went left aligned…
I mean, I have a two column row and in one of the columns I have an image module with center alignment on the module settings but when I use the class the image appears left aligned instead of at the center…
Well, I will keep on searching. Thanks for all of your tutorials, I have found some of them very helpful.
You should be able to set alignment for the image in the CSS Jorge, if you provide a link I can take a look
For some reason this isn’t working for me.
I’ve used text modules with embedded images.
All the images are bottom aligned in the rows, not vertically centered.
Am I missing something?
I would need a link to check the issue please Matt
I have the same issue of bottom-alignment, please check here:
http://digital.fivee.co.uk/apprenticeships/application-specialist-apprenticeships/
Ok found a workaround
Noticed this only happened when I had the text aligned to center….
So I changed text alignment to left in the divi module settings, and added text-align: center; to the CSS of the same module…
So there’s some kind of issue between what your CSS does to vertically align center, and what the module is doing to horizontally align center….
Sorry same issue as what? I can’t see your problem can you provide some more details please?
I was having the same problem as some other people where the custom css and class was causing the module to vertically align to the bottom of the column, rather the middle. I noticed this was only occurring when “center” was selected in the text alignment setting.
I managed to get past it, by leaving the text alignment to left and then using “text-align: center;” in the CSS of the module instead.
So there is something regarding the center alignment option conflicting with the vertical alignment code you have added….
Michelle
!!
So class, so simple, so great, so essential
!!
You’re one of the indispensable elements for the web community (the fifth
?) !!
Thanks for all your cool shares, Michelle !
Thanks Pierre, very kind
I’m excited to find this site! My attempt to use this renders the text at the bottom of the column instead of the center, and I’m not sure where I went wrong, having cut and paste everything. I have two columns, the first has only an image, the second, where I’m using the css, has two text modules. Before the css, the text floated at the top of the column, and now it sits at the bottom. Any idea what I’ve done wrong? I’m viewing in Safari browser on iMac. Thank you!
I would need a link to check this for you James but do keep in mind that each text module will have its own margin and padding so there simply may not be enough room, but without a link I am just guessing
Thanks so much but this isn’t working for me. I’m trying to use it on a 3 column row with a call to action in each column and each column has a background image set in the row settings. I do have a minimum height set for the main element in each of the call to actions. Could that be having an effect? I have padding set for the right and left but not for the top and bottom. Any help would be greatly appreciated. Thanks!
Do you have a link to the problem Julie?
Una solución sencilla, elegante y muy, muy útil.
¡Muchas gracias!
A simple, elegant and very, very useful solution.
Thank you very much!
Very nice way to center the content – thanks a lot!
Nice tips ! Its gonna be useful ! Thanks
Michelle, will this work across all popular browsers? I’d thought that CSS flex wasn’t fully supported.
I can’t test on mac Patrick but it works for me in all browsers on Windows and it is pretty well supported http://caniuse.com/#search=flex
Thanks, Michelle,
You tips are always so helpful and easy!
You are welcome Susan
Very neat solution Michelle – I’ve not come across ‘flex’ or flex-direction before. Quite what do they do? And while I understand ‘justify-content’ again I’ve not seen it used. So, something else to add to my knowledge base. Thank you.
Glad it is useful Brian, thank you
Michelle, are you a mind reader????
I am just setting up a site where I need this vertical alignment and was looking for it!
Thanks!
Haha, I just pay attention to the issues Divi users seem to be having Frans
Thank you for this great tutorial. I wonder if this works for the text (the headline) on a fullwidth post title Divi module, too?
Not sure you would need it Andrej, from memory the post title sits in the vertical center, at least if you are using the featured image as a background