css垂直居中-通用

css垂直居中的方法很多，其中有些方法是依赖固定宽高实现，这些写法非常不友好，我自己项目中很少使用。

我习惯使用以下两种方法

1、CSS3的transform来实现

<div id="wrapper">
  <div class="middle-contents">
    
</div>
</div>

#wrapper {
  position: relative;
}
.middle-contents {
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

2、flex布局

<div id="wrapper"></div>

#wrapper {
  /*flex 布局*/
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  /*实现水平居中*/
  justify-content: center;
}