垂直居中的方法

行内元素居中

html

<span>我要居中</span>
<img1 src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">

css

span{
  font-size:150px;
  vertical-align:middle;
}
img{
  vertical-align:middle;
}

before元素居中

html

<div class="box">
 <img1 src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
</div>

css

.box{
  width:300px;
  height:200px;
  border:1px solid;
  text-align:center;
}
.box:before{
  content:'';
  display:inline-block;
  height:100%;
  vertical-align:middle;
}
.box img{
  vertical-align:middle;
}

table-cell居中

css

.box{
  width:300px;
  height:200px;
  border:1px solid;
  text-align:center;
  vertical-align:middle;
  display:table-cell; 
  *display:inline-block; //IE6 7
}

垂直居中

html

<div class="parent">
  <div class="son">我要居中</div>
</div>

css

1.绝对定位居中

.parent{
    position: relative;
}
.son{
  position: absolute;/*或fixed*/
  left: 50%;
  top: 50%;
  width:150px;
  height:100px;
  margin-left:-50px;
  margin-top:-50px;
}

2.margin：auto 居中

.son{
  position: absolute;/*或fixed*/
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin: auto;//重要
}

3.css3属性

.son{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);//相对于自身偏移
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
}