前提是要求用到的所有元素宽度高度都不确定的情况下：
比如父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;}
优点：只设置父元素即可。