display: table的几种用法

1.父元素宽度固定，想让若干子元素平分宽度

通常的做法是手动设置子元素的宽度，如果设置百分数不一定能整除，设置具体的数值又限制了父元素的宽度固定。。。
可以使用display:table来解决：

.parent{
  display: table;
  width:300px;
}
.son{
  display: table-cell;
 }

如此一来，就算是三个或者六个元素也很方便均分父元素的宽度了。

2、块级子元素垂直居中

想让一个div或p在父元素中垂直居中一直是很多人解决不了的问题（注意直接对块级元素使用vertical-align是不能解决这个问题的，vertical-align定义行内元素的基线相对于钙元素所在行的基线的垂直对齐），同样可以使用display:table方便解决：

.parent{
  display: table;
}
.son{
  display: table-cell;
  vertical-align: middle;
}

注意：虽然display:table解决了避免使用表格的问题，但有几个需要注意的：

（1）display: table时padding会失效
（2）display: table-row时margin、padding同时失效
（3）display: table-cell时margin会失效