<style>
.box-1,
.box-2?{
width:?200px;
height:?150px;
border:?1px?solid?#666;
}

.box-1?{
background:?#9a0;
}

.box-2?{
background:?#c56;
}

.box-3?{
width:?150px;
height:?70px;
background:?#c22;
margin:?auto;
transform:?translateY(-50%);
}
</style>
<div?class="box-1">
</div>
<div?class="box-2">
<div?class="box-3"></div>
</div>

顯然用定位來做

第一步：將三個DIV設置為同級元素；
第二步：為三個DIV的父元素設置 position:relative;或position:absolute；不用給父元素設置距離；
第三部：給你要位于中間的元素設置position:absolute（脫離文檔流）；然后通過 top:*px;left:*px;調整位置到中間就行了；
注 ：*指的是像素距離，使用百分比也可以；

用絕對定位