垂直居中对齐四种样式

垂直居中对齐

• 传统的:(需要设置盒子的宽高)

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;
     }