[教學] CSS3 translate 轉換屬性，讓DIV區塊中的元素垂直與水平居中

<div class="div-box">
    <div class="mid-box">
    <img src="https://photo.minwt.com/cc0/013.jpg">
  </div>
</div>

.div-box{
  width: 800px;
    height: 800px;
    border:solid 3px #333;
    position: relative;
}
.mid-box{


}
img{max-width:100%;}

.mid-box{
 -ms-transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}

.mid-box{
 -ms-transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 position: absolute;
 top:50%;
 left:50%;
}