css对不定宽高的盒子设置水平垂直居中的几种方法

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

一，display:table-cell

.parent {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.child {
	display: inline-block;
}

二，display:flex;只需设置父类，但兼容性有问题

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

三，absolute+transform，绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。transform 为 CSS3 属性，有兼容性问题 。

.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}