首頁  >  文章  >  web前端  >  利用css如何讓div處於永遠居中狀態?

利用css如何讓div處於永遠居中狀態?

零下一度
零下一度原創
2017-05-12 13:59:402258瀏覽

不管螢幕如何滑動,該p始終保持在螢幕正中央(支援IE7(包括IE7)以上版本)

下面介紹的這段簡單的程式碼就可以實現這個功能,請大家可以來參考一下。

<p class="loginBox"></p>

css部分應該這樣子寫:

.loginBox {
    background: #FA2;
    width: 700px;
    height: 400px;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 11;
    /*设定这个p的margin-top的负值为自身的高度的一半,margin-left的值也是自身的宽度的一半的负值.*/ 
    /*宽为400,那么margin-top为-200px*/ 
    /*高为200那么margin-left为-100px;*/ 
    margin: -200px 0 0 -350px;
}

 寫完了,就這麼簡單,是不是覺得想不到呢。

【相關推薦】

1. 免費css線上影片教學

2. css線上手冊

#3. php.cn獨孤九賤(2)-css影片教學

#

以上是利用css如何讓div處於永遠居中狀態?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn