display：table 和 display:table-cell 需要一起用吗？急急急在线等～

Question

display：table 和 display:table-cell 需要一起用吗？

我怎么感觉在div里直接使用display:table-cell 也可以满足垂直居中

Answer 1

不必要。

如果你不给display: table-cell的父亲或祖先节点设置display: table，浏览器会创建匿名的table-row框和table块框/table内联框出来。

应用css table布局的时候也分情况。
如果你需要对display: table-cell设置百分比高度/宽度时，就需要组合使用display:table。

可以看一下这fiddle，比较一下test #1和#2：

http://jsfiddle.net/ocja4y0e/1/

原理解释：
涉及到百分比，我们就必须看包含块。常规流的 table-cell 的包含块是它的祖先节点上的 table 元素。如果祖先节点上面没有 table 元素，浏览器会构建一个 anonymous table box。（这段解释模糊了比较多的细节，建议阅读包含块等spec后详细理解）
因而你需要设置它的祖先节点的 table 的高度，以对 table-cell 使用百分比的高度。

---

w3c CSS2.1的相关spec在此

anonymous table box：

Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element.

Answer 2

不一定一起使用，但是有时候外层div需要使用display:table 内层使用display:table-cell这样才能有table的效果，尤其是内层有多个兄弟节点或者多行的时候。具体的你可以在不同浏览器中试试看。