如何垂直水平居中

每天都被ui说这个框不居中，这不居中。幸好产品懂代码，知道我尽力了，所以总结下几个居中的办法。

水平居中

1. 行内元素: text-align:center
2. 块级元素: margin:0 auto
3. 绝对定位和移动: absolute + transform
4. 绝对定位和负边距: absolute + margin
5. flex布局: flex + justify-content:center

垂直居中

6. 子元素为单行文本: line-height:height
7. absolute + transform
8. flex + align-items:center
9. table: display:table-cell; vertical-align: middle
10. 利用position和top和负margin

:已知元素宽高

div{
      width: 200px;
      height: 200px;
      background: green;

      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
  }

绝对定位+负margin

div{
      width: 200px;
      height: 200px;
      background: green;

      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
  }

flex + justify-content + align-items

.box{
   height:600px;
   display:flex;
   justify-content:center;  
   align-items:center;      
    }
  .box>div{
    background: green;
    width: 200px;
    height: 200px;
  }

大概就是这样了，再也不怕说不居中了。