Mertafor Mertafor - 1 year ago 108
CSS Question

Horizontally and vertically center align DIV grid

I know this is a very old question and there are several approaches to this like using "flex" or fixed height etc.

But I found myself a new solution and need to understand if it's OK to use this way :

div.parent {
div.child {

This reason why I open this topic is to learn what are the drawbacks of using "display:table" for parent div. Because without it, multiple "child" divs collapsed due to unknown extra display:inline-block margin.

This method works like charm with pretty much all modern browsers yet I haven't come across before. So just need to make sure that it's alright to use.

Edit : I added width value to child

Demo :

Rob Rob
Answer Source

All display:table does is create a block level box "like a table". Without making the child elements display:table-cell or such, it doesn't do anything more than display:block does. Try it and see.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download