居中布局
<div class=”parent”>
  <div class=”child”>demo</div>
</div>
1.水平居中
    1>     方案一 inlink-block+text-align
             .child {display:inlink-block;}
             .parent {text-align:center;}
             优点：兼容性好
             缺点：子元素宽高不可设置
    2>     方案二 table+margin
             .child {display:table; margin:0 auto;}
             优点：只需要设置child（自己）
    3>     方案三 absolute+transform
             .parent {position:relative;}
             .child {position:absolute;left:50%;transform:translatex(-50%);}
             优点：子元素不会对其他元素产生影响
             缺点：兼容性问题
    4>     方案四 flex+justify-content
             .parent {display:flex;justify-content:center;}
             优点：只需设置parent节点
             或者设置为
             .parent {display:flex;}
             .child {margin:0 auto;}
             缺点：flex低版本ie不支持
2.垂直居中
    1>     方案一 table-cell+vertical-align
             .parent {display:table-cell;vertical-align:middle;}
             优点：只需设置父节点，兼容性好
    2>     方案二 absolute+transform
             .parent {position:relative;}
             .child {position:absolute;top:50%;transform:translatey(-50%);}
             优点：子元素不会对其他元素产生影响
             缺点：兼容性问题
    3>     方案三 flex+align-items
             .parent {display:flex;align-items:center;}
             优点：只需设置父节点
             缺点：兼容性问题
3.水平和垂直均居中
     1>     方案一 inline-block+text-align+table-cell+vertical-align
              .parent {text-align:center;display:table-cell;vertical-align:middle;}
              .child {display:inline-block;}
     2>     方案二 absolute+transform
              .parent {position:relative;}
              .child { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
     3>     方案三 flex+justify-content+align-items
              .parent {display:flex;justify-content:center;align-items:center;}
思路：了解属性值特性，分解问题。