前端制作之css position居中

在现在大分部网站中都会使用定位（position）把一个div盒子（a）移至我们想放置的位置上，而往往这个我们想放置的位置是div盒子（a）在父级盒子（b）中上下左右居中显示，我们会用到position两种属性值absolute（绝对定位）和relative（相对定位）。
absolute（绝对定位）：元素会脱离原来的文档流，使用left，right，top，bottom等属性设置的值相对于定位设置（relative（相对定位））的父级对象进行绝对定位，如果父级没有进行定位属性设置，就会一层一层往上直到有定位的祖辈级元素为止，同时绝对定位的对象可层叠。
relative（相对定位）：元素不会脱离原来的文档流，使用left，right，top，bottom等属性在正常的文档流中进行定位，其对象不可以层叠。
设置b盒子为relative（相对定位），a盒子为absolute（绝对定位），a盒子的宽高固定，top、left、right、bottom的值为0，margin：auto；代码如下图：