绝对定位居中

‘’绝对定位中如何让元素进行水平垂直居中。下面是三种方法，其中方法一、方法二原理差不多[绝对定位 然后margin值取元素宽高一半（负值）]，方法三就是让绝对定位上下左右都是0 然后给它一个margin: auto;
1、 方法一
主流写法。需要提前知道元素的尺寸。否则margin负值无法精确。[可通过js获取高度。]

.wrap {
    width: 500px;
    height: 400px;
    background: #000;
    position: relative;
}

.uP {
    width: 100px;
    height: 100px;
    background: #ff0000;
    position: absolute; /* 绝对定位 */
    top: 50%;
    left: 50%;
    margin-top: -50px; /* 高度的一半 */
    margin-left: -50px; /* 宽度的一半 */
}
<div class="wrap">
    <div class="uP"></div>
</div> 

2、方法二
无论绝对定位元素的尺寸是多少，都可水平垂直居中显示 可利用CSS3中transform代替margin. transform中translate偏移的百分比值是相对于自身大小的。

.wrap {
        width: 500px;
        height: 400px;
        background: #000;
        position: relative;
    }

.uP {
    width: 300px;
    height: 300px;
    background: #ff0000;
    position: absolute; /* 绝对定位 */
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);  /* 50%为自身尺寸的一半 */
} 
<div class="wrap">
    <div class="uP"></div>
</div> 

PS：兼容性不好。记得写浏览器前缀transform

3、 方法三

//代码和上面一样，只是改动了.uP的样式。这个方法不管你更改外层或是外层div的宽度高度他都会自动居中。
.wrap {
    width: 500px;
    height: 400px;
    background: #000;
    position: relative;
}

.uP {
    width: 100px;
    height: 100px;
    background: #ff0000;
    position: absolute; /*绝对定位 上下左右0*/
    top: 0px;
    bottom: 0px;
    left: 0px; 
    right: 0px;
    margin: auto; /*居中关键*/
}
<div class="wrap">
    <div class="uP"></div>
</div>