元素水平垂直居中

未知元素宽高

1.父级(flex布局)

{    display: flex;  
      justify-content: center;//水平居中
      align-items: center; //垂直居中   }

2.父级    {  display: table;   text-align: center; }

   子级    {   display: table-cell; vertical-align: middle;  }

3.定位

父级  {  position: relative;}

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

4. 定位

父级    {  position: relative;}

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

已知元素宽高

父级  {  position: relative;}

子级  { width: 300px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -100px;}