CSS垂直居中布局方法

//长宽的设置只是为了说明，实际使用没有限制
<div id="container-outer">
  <div id="container-inner"></div>
</div>

//CSS
#container-outer {
  width: 200rem;
  height: 100rem;
  position: relative;
}

#container-inner {
  width: 100rem;
  height: 50rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25rem;
  margin-left: -50rem;
}

//长宽的设置只是为了说明，实际使用没有限制
<div id="container-outer">
  <img id="container-inner">
</div>

//CSS
#container {
  width: 200rem;
  height: 100rem;
}

#container:before {
  content: ‘‘;
  display: inline-block;
  vertical-align: middle;
  height: 100%;    
}

#container-inner {
  width: 100rem;
  height: 50rem;
  display: inline
  vertical-align: middle;
}