css垂直居中@qunar

 　　<div>
　　　　 <span><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="Logo" />固定高宽,图片垂直局中</span>
　　</div>

　　.vertical {
  	width:500px;
 	height:220px;
	line-height:220px;
	border: 1px solid;
	text-align: center;
　　}
　　.vertical img {
	vertical-align: middle;
　　}
　　</style>
　　<!--[if IE 6]>
　　<style>
 　　 .vertical span {
  	height: 100%; /* 要保证和父元素高度一样才行 */
	writing-mode: tb-rl;
	vertical-align: middle;
 　　}
　　</style>
　　<![endif]-->　　　　　　

　　<style>
　　.vertical{
	width:300px;
	height:200px;
	display:table;
	text-align:center;
	border:solid 1px red;
　　}
　　.vertical span{
	display:table-cell;
	vertical-align:middle;
	border:solid 1px blue;
　　}
　　.vertical span img{
	border:dashed 1px green;
　　}
　　</style>
　　<!--[if lte IE 7]>
　　<style>
　　.vertical{
	position:relative;
	overflow:hidden;
　　}
　　.vertical span{
	position:absolute;
	left:50%;
	top:50%;
　　}
　　.vertical span img{
	position:relative;
	left:-50%;
	top:-50%;
　　}
　　</style>
　　<![endif]-->

　　 <div>
　　　　  <span><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="Logo" /></span>
　　</div>

　　<style type="text/css">
　　.demo{
	resize:both;
	overflow:hidden;
	width:100px;
	height:100px;
	background:#aaa;
	display:inline-block;
	font-size:0; 
　　}
　　.demo p{
	display:inline-block;
	vertical-align:middle;
	font-size:16px;
　　}
　　.demo::after{
	display:inline-block;
	height:100%;
	width:0;
	content:‘\0020‘;
	vertical-align:middle;
　　}
    </style>

	<p>ddd</p>
　　</div>

   /*单行文本对齐：button*/
    .demo{
      width:600px;
      height:100px;
      background:#fcc;
      border: 1px solid #596480;
    }
    button{
      margin:0;
      padding:0;
    }
    .demo button{
      width:0;
      height:100px;
      vertical-align:middle;
      overflow:hidden;
    }
    .demo span{
      /*这个不能省*/
      vertical-align:middle;
    }

　　<h2>单行文本垂直居中：button</h2> 
　　<div class="demo">
 　　 <button>test</button>
 　　 <span>单行文本垂直对齐：button，不能居中对齐</span>
　　</div>

　　<h2>多行文本垂直居中：定位+百分比</h2>
　　<div class="mul-text">
   　　 <div class="outter">
      　　 <span class="inner">
             多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中
             多行文本垂直居中多行文本垂直居中
　　      </span>
   　　</div>
　　</div>

     /*多行文本居中：1*/
    .mul-text{
        display: table-cell;
        width:600px;
        height: 100px;
        vertical-align: middle;
        text-align:center;
        border: 1px solid #596480;
        background: #ffc;
        /*兼容ie6,7*/
        *position: relative;
      }
    .outter{
        /*该div相对父div（class=mul-text）垂直对齐，使用的是绝对定位*/
        *position: absolute;
        *top: 50%;
        *left: 0;
    }
    .inner{
        /*相对父div(class=outter)进行相对定位,inner
        会相对outter行框进行显示*/
        *position: relative;
        /*设置top可以使得inner相对outter居中*/
        *top: -50%;
        *left: 0;        
    }

  　　<h2>多行文本垂直居中：after</h2>
  　　<div class="mul-text-2">           
    　　<span class="inner-2">
　　       多行文本显示多行文本显示多行文本显示多行文本显多行示多行文本显示多行文本
   　　 </span>
　　    <span></span>           
　　 </div>

     /*多行文本对齐：after*/
    .mul-text-2{
        width:600px;
        height:100px;
        background:#aa8;
        /*font-size不能少*/
        font-size:0;
        overflow:hidden;
        text-align:center;
    }
    .inner-2,.after,.mul-text-2:after{
        display:inline-block;
        vertical-align:middle;
    }
    .inner-2{
        font-size:18px;
    }
    .after,.mul-text-2:after{
        /*清除浮动*/
        content:"\0200";
        overflow:hidden;
        width:0;
        height:100px;
        visibility:hidden;
    }

 　　<h2>图片垂直居中：行高</h2>    
　　 <div class="img-text">
    　　 <span>sssssss1</span>
    　　 <div class=‘img-div‘><i></i></div>
　　 </div>

    /*背景图片*/
    .img-text{
        width:600px;
        height:100px;
        border:#f63;
        border: 1px solid #596480;   
        vertical-align:middle; 
        text-align:center; 
        font-size:0;  

    }
     
    .img-text span{
        font-size:15px;
        display:inline-block;
        height:100px;
        line-height:100px;
    }

    .img-div{
        width:134px;
        height:44px;        
        display:inline-block; 
        vertical-align:middle;       
    }
    .logo{
        display:inline-block;
        background:url(./img/logo.png);
        width:134px;
        height:44px;   
    }