DIV+CSS的布局已经让表格布局几乎很少用到，但是一些表格所特有的属性比如垂直居中等在一些布局中使用会比其他的布局方式得心应手，下面小编就和大家分享下 display：table在一些特殊场合的应用：

一、父元素宽度固定，想让若干个子元素平分宽度（多栏等高）

通常的做法是手动设置子元素的宽度，如果设置百分数不一定能整除，设置具体的数值又限制了父元素的宽度固定，很烦。

1. <div class="parent"><div class="son"></div><div class="son"></div><div class="son"></div></div>

可以使用display：table来解决：

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

特别说明：如果我们为元素使用“display:table-cell;”属性，而不将其父容器设置为“display:table-row;”属性，浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样。代码为：

1. <div class="parent"><div class="row"><div class="son"></div><div class="son"></div><div class="son"></div></div></div>
2. .parent{display: table; width: 1000px;} .row{display:table-row;}.son{display: table-cell;}

二、块级子元素垂直居中(比如大小不一的图片图片在div内的垂直居中)

想让一个div或p在父元素中垂直居中一直是很多人解决不了的问题，同样可以使用display：table方便解决：

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

将块级子元素的display设置为table-cell之后再使用vertical-align就可以了。

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

（1）display: table时padding会失效

（2）display: table-row时margin、padding同时失效

（3）display: table-cell时margin会失效