Vertically center a div inside a display: table-cell element?

Question

I am trying to center a div inside a table-cell element. I really tried all the previous answers but I simply could not figure it out. Here is the code I am using:

HTML skeleton:

<div class="selection"> <div class="selection_empty"> <p>No selection.</p> <p>Click the button below to start the process.</p> <span class="selection_icon ico_add_medium"></span> </div> </div>

CSS style:

.selection { display: table-cell; width: 50%; padding: 0 10px 0 10px; }

As I mentioned, I tried everything I found on but nothing did the trick. I would really appreciate your help! Thank you!

You should change your post to say "vertically center" a div, rather than "center", as that usually implies horizontal alignment. — Chris
– Chris, Commented Feb 15, 2016 at 15:01

Marcos Pérez Gude · Accepted Answer · 2016-02-15 14:59:11Z

4

Add vertical-align: middle because is a table cell style, if you change the table cell style the trick will be other, but without changing nothing:

.selection { display: table-cell; width: 50%; padding: 0 10px 0 10px; vertical-align: middle; }

I add the fiddle link to show this works:

https://jsfiddle.net/qL5sf9uo/

edited Feb 15, 2016 at 14:59

answered Feb 15, 2016 at 14:57

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Marcos Pérez Gude Over a year ago

Hey, don't downvote if you don't know about this topic. It works perfectly, see the fiddle: jsfiddle.net/qL5sf9uo

amanuel2 Over a year ago

Dont put the fiddle here. Up There ^^^^

Marcos Pérez Gude Over a year ago

I edit the answer 1 minute ago with the link, however, I'm not meritory of your downvote. I hope this helps to OP

Mihai Over a year ago

Thank you, it worked like a charm. You determined me to study more carefully the display: table properties.

Collectives™ on Stack Overflow

Vertically center a div inside a display: table-cell element?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related