position:absolute后使得元素居中

如题。

        网页布局中有一种情况是这样子。

        两个元素，A,B均为块级元素，但是我需要A作为底，而B显示在A上面，并且相对于A确定在某个位置。

        考虑使用position.position有三种，分别是fixed,relative,absolute。

        static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
        relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
        absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以 body坐标原点进行定位，可以通过z-index进行层次分级。
        fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

        一般上面描述的这种情况，我们会使用这样的方式来实现：

        A需要有一个父级元素C。

        我们将给C元素设置一个position:relative的属性。然后A元素照常在那个位置，不需要设置任何position的相关属性。对于B元素，我们设置其属性为position:absolute。由上面的介绍可以知道，position:absolute的父级元素有posititon的属性，那么该元素则以C元素的坐标原始点作为原始点进行调整。此时我们就可以通过TRBL四个属性来相对父级C的位置进行调整。

        那么，如何让到B元素在A元素上面呢？就可以通过TRBL来让B转到A的上面。并可以任意调整他在A上面的位置。这个上下位置的属性，可以通过Z-index来进行调整，数值越大则位置越上。

        那么如何使position:absolute来使得元素相对于父级元素进行定位呢？我们可以对B元素进行一个left:50%的向右移动，然后再设置一个margin-left:-(B元素宽度/2)px;来使得该元素向左移动其元素的1/2宽度。如此一来，B元素就能够相对其父级C元素进行居中。

        基本上这就是我们灵活使用position属性的方法。但是这种方法有他的缺陷，就是只能够相对于某一个宽度高度已经设定的父级元素来居中定位。如果是相对于可视窗口来居中，这种方法则不可行。