网易前端工程师课程中，布局解决方案

前提是要求用到的所有元素宽度高度都不确定的情况下：

比如父div与子div大小都不确定的情况下，要使子元素在父元素中确保居中。

<div class="parent">

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

</div>

水平居中解决方案：

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

优点：兼容性特别好，只有兼容性IE6,7不支持inline-block，但是通过.child{display:inline;zoom:1;}来实现兼容。

缺点：会影响到parent里面其他元素及child内部元素，需要通过内部元素样式覆盖，将text-align样式覆盖过来。

2、table+margin                    .child{display:table;margin:0 auto;}

优点：只设置child的样式即可。 支持IE8以上的浏览器，IE6,7下考虑将DOM结构换成table的结构。

3、absolute+transform           .child{display:absolute;left:50%;transform:translateX(-50%);}   .parent{display:relative};

优点：绝对定位脱离文档流，不会影响其他元素定位。

缺点：兼容性不支持IE6、7、8，高版本中要加私有前缀。

4、flex+justify-content           

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

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

      4.1优点：只设置父元素的样式即可。

       两个缺点：flex属性IE6、7、8不支持。

垂直居中解决方案：

1、table-cell+vertical-align                      .parent{display:table-cell;vertical-align:middle;}

优点：只设置父元素，兼容性不错兼容至IE8，IE6、7换结构。

2、absolute+transform                          .parent{display:relative;} .child{position:absolute;top:50%;transform:translateY(-50%;)}

优点：脱离文档流，不会影响其他元素。

缺点：兼容性问题。

3、flex+align-items                     .parent{display:flex;align-items:center;}

优点：只设置父元素即可。

缺点：兼容性问题。

水平和垂直都居中解决方案：

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%;top50%;transform:translate(-50%,-50%);}

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

优点：只设置父元素即可。