css 水平居中，垂直居中，居中整合。

记载的都是比较基础的 css常见属性。

 

child在不固定长宽的情况 分享几种不同居中。

html就公用一种结构，

<div class="parent">
   <div class="child">
         wayne
    </div>
</div>

水平居中

1.text-align: center + display: inline-block;

    .parent{
      text-align: center;
    }
    .child{
      display: inline-block;
    }

2.display: table + margin: auto;

    .child{
      display: table;
      margin: auto;
    }

3.position: absolute + transform: translateX(-50%);

    .parent{
      position: relative;
    }
    .child{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

4. display: flex + justify-content: center;

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

5.display: flex + margin: 0 auto;

    .parent{
      display: flex;
    }
    .child{
      margin: 0 auto;
    }

垂直居中

1. display: table-cell + vertical-align: middle;

    .parent{
      height: 400px;
      display: table-cell;
      vertical-align: middle;
    }

2.position: absolute + transform: translateY(-50%);

    .parent{
      position: relative;
      height: 400px;
    }
    .child{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

3.display: flex + align-items: center;

    .parent{
      display: flex;
      height: 400px;
      align-items: center;
    }

水平垂直居中

1.修改child为行内块元素

    .parent{
      text-align: center;
      height: 400px;
      width: 400px;
      display: table-cell;
      vertical-align: middle;

    }
    .child{
      display: inline-block;
    }

2.根据绝对定位+transform偏移到中间

    .parent{
      position: relative;
      height: 400px;
      width: 400px;
    }
    .child{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

3.flex布局方案解决

    .parent{
      display: flex;
      height: 400px;
      width: 400px;
      justify-content: center;
      align-items: center;
    }