一、水平居中

1. 文本、图片等行内元素的水平居中：text-align:center;
2. 宽度确定的块级元素的水平居中：margin-left:auto,margin-right:auto;
3. 宽度不确定块级元素的水平居中：

• 可以利用table元素的特性【它本身不是块级元素，如果不给它设置宽度的话，他的宽度将由内部元素撑起】，将该元素包裹在table标签中，再对table设置margin-left/right:auto即可实现水平居中。
• 可以将该块级元素display：inline，再设置其父元素text-align：center;
• 分别给该元素及其父元素设置定位：然后再利用百分比来控制其位置达到居中效果。
  给父元素设置float、position：relative，left：50%，子元素position：relative，left：-50%

二、垂直居中

1、父元素高度不确定的文本、图片、块级元素的垂直居中：给父元素设置上下相同的内边距。
2、父元素高度确定的单行文本的垂直居中：给父元素的height和子元素设置相同的line-height值。（这里的height设置不是必须的）详情参考：

• http://vanseodesign.com/css/vertical-centering/
• http://www.zhangxinxu.com/life/about/

3、父元素高度确定的多行文本、图片、块级元素的垂直居中：

• vertical-align：middle；（支队父元素是th、tr有效）

• .display：table-cell，vertical-align：middle；

水平垂直居中

<div class="pparent">
    <div class="child"></div>
</div>

方式一：

  .parent{
      position:relative;
  }
  .child{
     width:100px;
     height:100px;
     position:absolute;
     top:50%;//父元素的50%
     left:50%;
     trsform:translate(-50%,-50%);//自身的50% 2d转化
  }

方式二：

  .parent{
      position:relative;
  }
  .child{
     width:100px;
     height:100px;
     position:absolute;
     top:50%;//父元素的50%
     left:50%;
     margin:-50px 0 0 -50px;
  }

方式三：

  .parent{
      position:relative;
  }
  .child{
     width:100px;
     height:100px;
     position:absolute;
     top:0；
     left:0；
     right:0;
     bottom:0;
     margin:auto;
  }

方式四：flex布局

  .parent{
      display:flex;
      justify-content:center;
      align-items: center;
  }