//子元素和父元素高度不确定情况下
<div class="parent">
<div class="child">DEMO</div>
</div>
1.inline-block + text-align
.child{display: inline-block;}
.parent{text-align: center;}
优点：兼容性很好
缺点：child中文字受父类影响也会居中
2.table + margin
.child{
display: table;
margin: 0 auto;
}
优点：不需要关心parent的样式；display: table 在IE8以上都兼容，IE6、7中可以将结构换成table即可兼容。
3.absolute + transform
.parent{
position: relative;
}
.child{
position: absolute;//absolute默认没有宽度，由内容决定
left: 50%;
transform: translateX(-50%);//参照物为自身
}
优点：absolute脱离文档流，不会对其他元素产生影响
缺点：transform是CSS3新增内容，兼容性比较差（不兼容IE6/7/8）
四. flex + justify-content
.parent{
display: flex;
justify-content: center;
}
优点：只设置parent即可
缺点：flex兼容性差，不兼容IE6/7/8
.parent{display: flex;}
.child{margin: 0 auto;}
