CSS Vertical Center @qunar

1, the height of the div is known---line-hight

<div> <span><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="Logo"/> Fixed high-width, Picture vertical </span> </div>  

<style>

. 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%;/* to guarantee the same height as the parent element */writing-m 　　Ode:tb-rl;vertical-align:middle; } </style> <! [endif]-->

Just set line-height and height for the container and make the two values equal, plus Over-flow:hidden

1. Supports both block-and inline-pole elements

2. Support all browsers

3.IE does not support the center of IMG, etc.

2, positioning method Vertical Center display picture--height known

<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>  

Vertical-align for: inline and Table-cell elements; text-align applies to block elements

3, Unknown height vertical center--resiez

<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>

<div>

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

IE6-8B not supported

4, using button to achieve vertical centering

/* Single line of text alignment: 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{/* This cannot save */vertical-align:middle; } "Demo" > <button>test</button> <span> , single line text vertical alignment: button, cannot center alignment </span> </div>

This method does not allow text center alignment

5. Multiline text alignment: Positioning + percent

"Mul-text" > <div class="Outter" > <span class="Inner >             Multiline text vertical center multiline text vertical center multiline text vertical center multiline text vertical center multiline text vertical center multiline text Vertical center     & nbsp       Multiline text vertical center multiline text Vertical center       </span>   </div> </div>/* Multiline Text Center :1*/    .mul-text{        display:table-cell;        WIDTH:600PX;&NBSP ;       height:100px;        vertical-align:middle;        Text-ali  gn:center;        border:1px solid #596480;        background: #ffc;       /* compatible ie6,7*/        *position:relative;     }    OUTTER{&NBS P      /* The DIV is aligned vertically relative to the parent div (class=mul-text), using absolute positioning */        *position:absolute;        *top:50%;        *left:0;   }   .inner{/* Relative to the parent div (class=outter),inner will be displayed relative to the Outter row box */*position:relative;        /* Set top can make inner relative outter center */*top:-50%;            *left:0; }

6. Multiline text vertically centered: after

"Mul-text-2" > <span class="Inner-2 ">        Multi-line text display multiple lines This display multiple rows This display multiline texts show multiline text display multi-line texts    </span>     <span></span>            </div>/* Multiline text alignment:after*/    MUL-T ext-2{        width:600px;        height:100px;        Backgro und: #aa8;       /*font-size */        font-size:0;        O verflow: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{/* Clear floating */content:"\0200";        Overflow:hidden;        width:0;        height:100px;    Visibility:hidden; }

7, the background picture center

"Img-text" >     <span>sssssss1</span>     <div class= ' Img-div ' >& Lt;i></i></div> </div> /* Background image */    .img-text{        WIDTH:60 0px;        height:100px;        border: #f63;        border:1 PX Solid #596480;           vertical-align:middle;         Text-align:center;          font-size:0;     }         img-text span{        font-size:15px;  &N Bsp     display:inline-block;        height:100px;        Line-height :100px;   }    .img-div{        width:134px;        HEIGHT:44 px                display:inline-block;   &nbsp     Vertical-align:middle;          }    .logo{        display:inline-block;  &nbs P     Background:url (./img/logo.png);        width:134px;        Height : 44px;      }