CSS样式 vertical-align:middle 垂直居中生效情况

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

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

HTML

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

CSS

<div class="box box1">
        <span>垂直居中</span>
</div>

-----如果存在浮动不生效情况 需要通过元素占位的方法居中可以通过：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

<div class="floater"></div>
<div class="content"> Content here </div>

　　

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

　　

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