css之display:table

一、父元素宽度固定，想让若干个子元素平分宽度

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

可以使用display：table来解决：

 二、块级子元素垂直居中

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

<style>
    .table{
	    width:200px;
	    border:1px solid red;
	    display:table;
    }
    .text{
	    display: table-cell; 
        vertical-align: middle;
    }
</style>
 
<div class="table" style="margin-top:20px">
	<div class="text">
		<p>电话度不接为什么想不明白为什么</p>
	</div>
	
</div>

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

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