前一段时间部门分享会有同事分享了一个关于绝对定位居中的问题。现在来展示一下这个同事分享的案列。

首相这个div是放在body下面的，给这个div一个绝对定位，然后定义这个div的高度和宽度（假设是200px）。然后关键的来了，给这个div的left和top等于50%（让div向左和向下移动屏幕的50%）。然后在margin：-100px 0 0 -100px；（让div想坐和向上移动-100px，这个100px就是div宽度和高度的一般）这样这个div就可以居中了。说的很好，确实是可以居中了。附上代码如下：

Div{

    position:absolute;

    background:#f60;

    width:200px;

    height:200px;

    left:50%;

    top:50%;

    margin:-100px 0 0 -100px;

}

为了便于区分我把body背景赋予黑色。看上去一切都很完美，搞定收工。

打一下小广告，平时大家去量体重的时候是不是把衣服都算进去了，一个人不可能去量体重是把衣服都脱了吧，当然你在家里量的话可以。有时可能还会有钱包什么之类的，那就是说人的体重是加上衣服和身上的东西的重量。就像我们的div，一般我们都会附上边框，边距之类的给他，那么这个div的实际宽度和高度还是和我们给的200px那样吗？答案显然不是的，这样这个div的宽度很高度就变成了div宽度=给定宽度+边框+内边距。那么刚才我们说到margin:-100px 0 0 -100px;这个100px是不是已经不是这个div实际显示大小的一半了，这么说来这个div就不是完全居中了。为了让它居中我们要算上边框，内边距的大小，忽然间觉得回到了学生时代要处理几何问题了。好像我们的问题要得到了解答了，但不知道大家有没有试过不知道div大小的情况，那么这个margin应该怎么赋值呢？

现在我们来说一下不知道div大小在绝对定位下居中的问题。

首先说一下margin:auto;大家在页面布局的时候都见过margin:0 auto;让页面局中，margin:auto;也一样只不过他不是让页面左右局中，而是他是上下左右都局中，margin:auto;让上下左右都auto。那么问题不是可以解决了。附上代码

div{

position:absolute;

background:#f60;

left:0;

top:0;

right:0;

bottom:0;

margin:auto;

}

当然为了看到效果我们还要给他加上宽高；

这里我们给还是给他200px。

ok，问题解决了，不行的话可以试一下，可以随意的改变大小和增加边框边距之类的，他还是完全居中的。不过这个方法有个问题，在ie7下就不居中了，该死的ie，万恶的ie，老是喜欢出来作对。为什么在ie7下回不行呢？原来是因为ie7的渲染方式不同。至于怎么解决这个问题，暂时没有找到解决的办法。网友要是有解决的办法希望告知一下在下，再次感激不尽。

再说一下在手机端遇到这样的问题的话我们是不是按照上面这种方法呢？毕竟手机浏览器基本上都是高级浏览器，不担心不兼容。其实在手机端还有更好的办法解决，学过css3的网友应该都知道，transform：translate(,);这个属性，用这个属性的话可以完美解决手机端居中定位的问题。来看一下代码

div{

position:absolute;

width:200px;

height:200px;

background:#f60;

left:50%;

top:50%;

-webkit-transform:translate(-50%,-50%);

-moz- transform:translate(-50%,-50%);

transform:translate(-50%,-50%);

}

transform:translate(-50%,-50%);是让div偏移自身的50%；这个div的大小计算机会帮你计算，完全没必要自己拿比在哪里算还怕算错。

上述的定位也可以用固定定位，效果一样，在这里就不多做解释了。

第一次发博，文方面欠佳，请大家不要见怪，文中有错误的地方也请各位网友给在下指导一下，在下不甚感激。

关于绝对（固定）定位居中的问题