vertical-align:middle  是依赖div内子元素最高的行高来实现对某元素居中的

-------不存在浮动时可以直接生效垂直居中

HTML

.box1{    display: table-cell;    vertical-align: middle;    text-align: center;        }

CSS

     
        
      垂直居中
     

  -----如果存在浮动不生效情况 需要通过元素占位的方法居中可以通过：after 或者直接新建元素 (可能是定位影响子元素默认最高的行高)

.box1{   float:left;         }

　　

.box1:after{  content:'';  width:0;  height:100%;  display:inline-block;  vertical-align:middle;}

　　

其他垂直居中方式  浏览器兼容性不能兼容较低版本 很多是HTML5样式

       display:flex

.box1{    display: flex;    justify-content:center;    align-items:Center;}

　　　绝对定位和负边距

.box1{position:relative;}.box1 span{            position: absolute;            width:100px;            height: 50px;            top:50%;            left:50%;            margin-left:-50px;            margin-top:-25px;            text-align: center;        }

　　绝对定位和0

.box1 span{  width: 50%;   height: 50%;   background: #000;  overflow: auto;   margin: auto;   position: absolute;   top: 0; left: 0; bottom: 0; right: 0; }

　　translate

.box1 span{            position: absolute;            top:50%;            left:50%;            width:100%;            transform:translate(-50%,-50%);            text-align: center;        }

　　display:flex和margin:auto

.box1{    display: flex;    text-align: center;}.box1 span{margin: auto;}

　display:-webkit-box

.box1{    display: -webkit-box;    -webkit-box-pack:center;    -webkit-box-align:center;    -webkit-box-orient: vertical;    text-align: center}

　display:-webkit-box

     
  
     
       Content here 
     

　　

.floater {    float:left;     height:50%;     margin-bottom:-120px;}.content {    clear:both;     height:240px;     position:relative;}

　　

原文出处：http://www.cnblogs.com/hutuzhu/p/4450850.html