不固定宽高的小盒子在固定宽高的大盒子左右垂直居中

不固定宽高的小盒子在固定宽高的大盒子左右垂直居中

移动端项目中经常会遇到一些类似的需求，例如：logo的展示，banner图等。
一般情况下有以下几种方式：

1.flex布局 （在安卓6，ios8以下系统不兼容）

<div class="father">
	<img class="child" src="./logo.png" />
</div>

.father {
	display: flex;
}
.child {
	flex: 1;
}

2.定位（推荐）

定位问题记住口诀： 子绝父相

<div class="father">
	<img class="child" src="./logo.png" />
</div>

.father {
	width: 140px;
	height: 140px;
	overflow: hidden;
	position: relative;
}
.child {
	width: auto;
	height: 100%;
	max-height: 100%;  // 这里以高度为基准，溢出隐藏宽
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

3.利用table-cell属性

<div class="father">
	<img class="child" src="./logo.png" />
</div>

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