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

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

转载于:https://www.cnblogs.com/tianzhongshan/p/7007757.html