绝对定位居中

‘’绝对定位中如何让元素进行水平垂直居中。下面是三种方法，其中方法一、方法二原理差不多[绝对定位 然后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>