display：table相关问题

**[转载1]**https://www.cnblogs.com/stephen666/p/6995388.html
DIV+CSS的布局已经让表格布局几乎很少用到，除非表格语义性很强的情况。

display：table解决了一部分需要使用表格特性但又不需要表格语义的情况，

尤其是DIV+CSS很不方便解决的问题，比如以下两种情况：

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

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

可以使用display：table来解决：

.parent{display: table; width: 1000px;}
.son{display: table-cell;}
如此一来，就算是三个或者六个元素也可以很方便均分父元素的宽度了。

二、块级子元素垂直居中

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

.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会失效

**[转载2]**https://www.cnblogs.com/chen-cong/p/8076442.html
display:table和display:table-cell的妙用
　　display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！

这里抛出这样一个问题，如下，让块里的多行文字垂直居中？一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。但这里我介绍display：table和table-cell是如何让多行文字垂直居中的。虽然感觉用的不多，但是在某些时候还是挺管用的，如下

直接上代码：

html:

复制代码

会议认为，党的十八大以来，我国经济发展取得历史性成就、
发生历史性变革，为其他领域改革发展提供了重要物质条件。经济实力
再上新台阶，经济年均增长7.1%，成为世界经济增长的主要动力源和稳定器。

复制代码
css:

复制代码
.parent {
display: table;
width: 300px;
height: 300px;
text-align: center;
}
.son {
display: table-cell;
height: 200px;
background-color: yellow;
vertical-align: middle;
}
复制代码
看完代码是不是瞬间明白了，这里我们只需要将容器设为display:table然他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，然后就像在表格里一样，给子元素加个vertical-align: middle就行了,多行文字垂直居中啦。是不是很直接很简洁~

**[转载3]**http://how2j.cn/k/css2/css2-vertical-center/780.html
首先通过display: table-cell;把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果。
这样对图片也可以居中，上一步 line-height就不能对图片居中。
运行效果

代码：