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

文字在div中垂直居中显示

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

<style>
    .table{
        display: table;
        width:100px;
        height:100px;
        background: pink;
    }
    .table .box{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
</style>

html如下：

<div class="table">
    <div class="box">我是table方法写出的文字</div>
</div>

-方法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如下：

<div class="flex">
    我是flex方法写出的文字
</div>

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

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如下：

<div class="container">
  <div class="box">
    ...
  </div>
</div>

图片始终在屏幕居中显示

#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如下：

<div id="viewer">
  <img>
</div>