利用屬性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;
}

此時就達到居中的效果了:

此時如果再加上許多的換行符，當滾動條的滾動時，這個紅色的小方框會一直在頁面的中間，不隨滾動條滾動而消失。