利用属性position的属性值fixed使div在页面居中（详解）

首先，我们先来了解一下属性position当属性值取fixed时的作用：使对象脱离常规流，使用top，right，bottom，left等属性 以窗口为参考点 进行定位，当出现滚动条时，对象不会随着滚动。**
接下来我们看下面这个关于div的css：

div{
    position: fixed;
    left: 50%;
    top:50%;
    width: 100px;
    height: 100px;
    background-color: #f00;
}

根据对fexid的介绍，我们可以知道left:50%;和top:50%;是使div相对于页面的宽高，以左有页面宽50%的距离，以上有页面高50%的距离。
此时让我们来看看显示效果：

根据显示很容易看出，div并没有达到居中的目的。此时说明fixed中使用top，right，bottom，left等属性时它作用的对象定位的是div板块的左顶点，而不是整个div。此时，我们要让div居中，可以转化为让div版块的中心点居中，以达到div居中的效果。因此可以直接让divx向左向上移动div板块宽高的一半：(margin-left:-50px;margin-top:-50px;)

div{
    position: fixed;
    left: 50%;
    top:50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top:-50px;
    background-color: #f00;
}

此时就达到居中的效果了:

此时如果再加上许多的换行符，当滚动条的滚动时，这个红色的小方框会一直在页面的中间，不随滚动条滚动而消失。