在web前端的日常工作中，经常会遇到设计师设计稿上不同模块重叠显示的需求。而要将两个不同模块重叠显示通常是通过CSS中的position属性来设置的。
Position可取的值有 absolute、fixed、relative、static、inherit这些，具体说明可见下表：
前不久我在运用html+css来实现设计稿的前端效果工作中遇到了一个模块上下左右居中的问题，最开始看到的这块内容的时候，首先想到的是运用position:absolute;属性来定位，虽然最终是成功实现了模块上下左右居中的效果，但是过程却有些波折。
举个例子，要实现下图的上下左右居中：
如果是正常来说，基本就是量出两个模块的高度，然后用margin属性来设置使红色模块上下左右相对于灰色模块居中，这里给的灰色模块是600px * 600px的大小，红色模块是100px*100px的大小。CSS代码实现如下：
这样固然能实现红色模块居中的效果，但是却不太理想，如果红色模块是灰色模块的内容中独立出来的呢？
在这里...
