说明：垂直居中网上已经有很多讲解和情况，也有各种各样的解决办法，这里我写一个比较流行的模式。icon模式，就是左边是logo（当然也可以是文字），右边是说明。因为现在这种见得是 非常多。我只说其中一种模式。在绝大部分浏览器是没有问题的（我已经测过IE7-8,360所有模式，chrome，ff,搜狗）。
注意：转载需加 wangfeng 创建
| logo图标 | 文本介绍标题 文本介绍内容 文本介绍内容 文本介绍内容 文本介绍内容 文本介绍内容 文本介绍内容 |
*{margin:0;padding:0;}(这里只是简单，所以用了这样的写法) img { border: 0; vertical-align: middle; }
.cl { *zoom:1; }
.cl:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
.tac { text-align: center; }
.ver-external-box { width: 1000px; padding: 38px 0; position: relative; margin:0 auto; overflow: hidden }
.ver-parent-box { width: 164px; height: 100%; position: absolute; top: 0; left: 0; }
.ver-parent-box{ width: 164px; height: 100%; position: absolute; top: 0; left: 0; }
.ver-neiext-box { margin-left:180px; padding-left: 10px; line-height: 30px; border-left: #ddd solid 1px; }
.ver-content-box, #extra { display: inline-block; vertical-align: middle; *display: inline; *zoom: 1; }
/#extra { height: 100%; *width: 1px; }
<div class="ver-external-box cl">
<div class="ver-parent-box tac">
<span class="ver-content-box">
<img src="images/0.png" alt="">
（这里可以是文字） </span>
<div id="extra"><!-- ie comment --></div>
</div>
<dl class="ver-neiext-box">
<dt>我是测试标题</dt>
<dd>我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦，我是测试段落哦， <a href="javascript:;" class="blue" hidefocus="hidefocus">点击查看详情 >></a>
</dd>
</dl>
</div>
##列举未知宽高的水平垂直居中（只考虑主流或移动端作法）
<h4>
1、display:table-cell
</h4>
<div class="box box1">
<span>
水平垂直居中元素1
</span>
</div>
<h4>
2、display:flex
</h4>
<div class="box box2">
<span>
水平垂直居中元素2
</span>
</div>
<h4>
3、translate(-50%,-50%)
</h4>
<div class="box box3">
<span>
水平垂直居中元素3
</span>
</div>
<h4>
4、display:inline-block
</h4>
<div class="box box4">
<span>
水平垂直居中元素4
</span>
</div>
<h4>
5、margin:auto
</h4>
<div class="box box5">
<span>
水平垂直居中元素5
</span>
</div>
<h4>
6、display:-webkit-box
</h4>
<div class="box box6">
<span>
水平垂直居中元素6
</span>
</div>
<style>
.box{
width:200px;
height:200px;
background-color:yellow;
}
span{
background-color:red;
}
.box1{
text-align:center;
display:table-cell;
vertical-align:middle;
}
.box2{
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}
.box3{ position:relative;}
.box3 span{
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate3d(-50%,-50%, 0);
transform:translate3d(-50%,-50%, 0);
text-align:center;
}
.box4{
text-align:center;
font-size:0;
}
.box4 span{
vertical-align:middle;
display:inline-block;
font-size:16px;
}
.box4:after{
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
.box4:after{
content:''
}
.box5{
display:flex;
text-align:center;
}
.box5 span{
margin:auto;
}
.box6{
display:-webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
text-align:center;
}
</style>