css水平垂直居中的几种方法

一，水平垂直居中分为两类：

1，不指定宽高的元素

 /*常用在div模拟模态框*/
.demo{
     position:absolute; 
     left:50%; top:50%;
     transform:translate(-50%,-50%);
   }

.demo{
     position:absolute; 
     left:50%; bottom:0; 
     transform:translate(-50%,-50%);
   }

.demo{
     position:fixed;left:50%;
     top:50%;
     transform:translate(-50%.-50%); 
   }

2，指定宽高的盒子

/*绝对定位*/
.demo{
     position:absolute;
     left:0;
     right:0;
     top:0;
     bottom:0;
     margin:auto;
   }

/*负边距*/
.demo{
     width:1200px;
     height: 600px;
     position: absolute;
     left: 50%;
     top: 50%;
     margin:-300px 0 0 -600px;
   }

/*表格法*/
.demo{
     display: table-cell;
     vertical-align: middle;
     text-align: center;
   }

/*弹性盒子*/
 .demo{
     display: flex;
     justify-content:center;
     align-items:Center;
   }