display的table和table-cell搭配效果：文本\图片
display：table和table-cell是如何让多行文字在块内垂直居中？
多行文本的居中
网页中见过的案例效果：
HTML:
<div class="parent">
<p class="son">
冰爽饮品限时特惠
</p>
</div>
CSS:
.parent {
display: table; //容器变成块级表格元素
width: 30px;
height: 30px;
text-align: center;
}
.son {
display: table-cell; //对应子元素变成表格单元格
height: 30px;
vertical-align: middle;
}
关键是将容器本身设置为display:table-cell 单元格。再附加两条属性即可。父级不设为dispaly:table 也能产生效果
------------------------分割线---------------------------------------------------分割线------------------------------------------------------------------------
图片img的垂直居中：
<style>
div{
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: pink;
width: 500px;
height: 500px;
}
img{
width: 200px;
height: 200px;
}
</style>
<body>
</head>
<div id="app">
<!-- <span>撒大苏打大大飒飒的嘻嘻嘻嘻嘻潇洒分歧分期撒旦撒撒旦撒旦撒大安德森</span>
--> <img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg" alt="">
</div>
<!-- built files will be auto injected -->
</body>
效果：
