Mertafor Mertafor - 5 months ago 24
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 {
display:table;
text-align:center;
}
div.child {
display:inline-block;
vertical-align:middle;
width:33%;
}


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 :
https://jsfiddle.net/tcd8jkeb/

Rob Rob
Answer

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.

Comments