原始代码：
<div style="float:left;width:200px;height:200px;background:red;">
<span>aaa</span>
</div>
<div style="float:left;width:200px;height:200px;background:green;">
<div style="width:50px;height:50px;background:yellow;"></div>
</div>
测试1>>>>>>
外层div增加text-align:center属性，内层元素增加line-height:XXpx属性，高度与外层div高度一致：
<div style="float:left;width:200px;height:200px;background:red;text-align:center;">
<span style="line-height:200px;">aaa</span>
</div>
<div style="float:left;width:200px;height:200px;background:green;text-align:center;">
<div style="width:50px;height:50px;background:yellow;line-height:200px;"></div>
</div>
**********************************割割割*******************************************
测试2>>>>>>
外层div增加text-align:center、display:table属性，内层元素增加display:table-cell、vertical-align:middle属性：
<div style="float:left;width:200px;height:200px;background:red;text-align:center;display:table;">
<span style="display:table-cell;vertical-align:middle;">aaa</span>
</div>
<div style="float:left;width:200px;height:200px;background:green;text-align:center;display:table;">
<div style="width:50px;height:50px;background:yellow;display:table-cell;vertical-align:middle;"></div>
</div>
**********************************割割割*******************************************
测试3>>>>>>
外层div增加position: relative属性，内层元素增加position: absolute、top: 50%、left: 50%、transform: translate(-50%,-50%)
属性：
<div style="float:left;width:200px;height:200px;background:red;position: relative;">
<span style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">aaa</span>
</div>
<div style="float:left;width:200px;height:200px;background:green;position: relative;">
<div style="width:50px;height:50px;background:yellow;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"></div>
</div>
**********************************割割割*******************************************
经过上面三种方法的测试，以下几点请大家自行总结：
1、三种方法，对于div内层元素是否为div时的区别；
2、三种方法，对于div的宽高是否为固定值时的区别。