CSS未知DOM宽高设置居中

常规的面试问：不知道宽高的情况下如何实现垂直居中，今天我们讨论一个比较复杂的场景，同样是不知道宽高，而且 还要限制最大宽高边界，比如头像，要求上传的头像没有最小宽高限制，但是有最大宽高限制，还要实现上下左右自适应居中，类似于img标签的background属性，当然如果你真的是img的话也可以使用 background来解决这个问题，如果这个块的一个div就尴尬了，所以我们今天分享一个通用的解决方式

html代码：

	<div class="imgBox">
		<div class="img"></div>
	</div>

（下面我们要实现在 .imgBox 宽高范围内实现 .img 垂直水平居中，而且 .img 的宽高最大边界不能超过 .imgBox 的宽高最大边界）

CSS代码：

// 下面设置自适应
.imgBox {
	width: 100px;
	height: 100px;
	position: relative;
 }
.img {
	max-width: 100%;
	max-height:100%;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%)
}