CSS-布局6-相对父元素居中

1、实现效果

实现效果

2、实现思路

（1）使用一个div中，放置3个div内容、红色方块、蓝色方块。
（2）设置div的布局为相对定位，设置红色和蓝色方块的盒子为绝对定位。
（3）设置红色方块盒子top:50%，y轴偏移到中间，但是盒子并不是在中间，通过margin-top:-20px. 向上偏移方块的一半，这样红色方块正好到中间。
（4）设置蓝色方块盒子left:50%，x轴偏移到中间，但是盒子并不是在中间，通过margin-left:-20px. 向走偏移方块的一半，这样蓝色方块正好到中间。

3、源代码