//子元素和父元素高度不确定情况下
<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;}