display:table 和 display:table-cell 需要一起用吗?
我怎么感觉在div里直接使用display:table-cell 也可以满足垂直居中
不必要。
如果你不给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.
不一定一起使用,但是有时候外层div需要使用display:table 内层使用display:table-cell这样才能有table的效果,尤其是内层有多个兄弟节点或者多行的时候。具体的你可以在不同浏览器中试试看。