居中后的显示问题是由于权级问题吗？
.wrap{
height:300px;
background:red;
display:table-cell;
vertical-align:middle;
}
<div class="wrap">
<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>照.container给小女孩图片添加了.wrap，实现了居中，但两个DIV在同一行：如下
按说，两个DIV是平辈的，按默认应该是上下显示。添加<br />后，如下：
可见应是｛display：...｝的问题，但两个div应不存在重叠的问题。
继续尝试，
.container{height:400px;}
.wrap{height:200px;background:red}结果如下：
.wrap{height:200px;}没有应用到，而是跟随了.container{height:400px;},DIV间插入<br />,结果如下：
问题来了，div之间插入<br />或任意字符，CSS不变，为什么结果不同？
