水平垂直居中的几种办法

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

1，不指定宽高的元素

   >> 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%); }  //常用在div模拟模态框

2，指定宽高的盒子

   绝对定位和0

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

---end.