垂直居中對齊

• 傳統的:(需要設定盒子的寬高)

div {
     position: absolute;
     top:50%;
     left:50%;
     margin-left: -50%; // 元素的自身寬的一半
     margin-top: -50%; // 元素的自身高的一半
   }

• 特殊的:

div {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
   }

• css3:

 div {
 

   position: absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%)
 }

• flex:給父元素設定

     div {
       display: flex;
       justify-content:center;
       align-items: center;
     }