垂直居中显示（文字&块级元素）

文字在div中垂直居中显示

-方法1：将div改为table格式
css如下：

html如下：

    
我是table方法写出的文字

-方法2：将div改为flex格式
css如下：

.flex{
  display: flex;
  display:-webkit-flex;
  width:100px;
  height:100px;
  background: yellow;
  -webkit-align-items:center;
  justify-content: center;
  align-items: center;
}

html如下：

    我是flex方法写出的文字

---

块级元素始终在屏幕居中显示

css如下：

.container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.box{
  position:absolute;
  left:50%;
  top:50%;
  height:auto;
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  -o-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}

html如下：

  

    ...
  

---

图片始终在屏幕居中显示

#viewer{
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    text-align: center;
    display: flex;
    display:-webkit-flex;
    -webkit-align-items:center;
    justify-content: center;
    align-items: center;
}
#viewer img{
    max-width:100%;
    max-height:100%;
    margin:auto;
}

html如下：