欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何讓一個(gè)div居于頁(yè)面正中間【實(shí)現(xiàn)方法】

  發(fā)布時(shí)間：2016-04-15 16:18:07   作者：佚名   我要評(píng)論
下面小編就為大家?guī)?lái)一篇如何讓一個(gè)div居于頁(yè)面正中間【實(shí)現(xiàn)方法】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享個(gè)大家，也給大家做個(gè)參考

如何讓一個(gè)div居于頁(yè)面中間，我今天說(shuō)的是讓一個(gè)div水平居中同時(shí)垂直居中，而不是簡(jiǎn)單的top：50%，left：50%。當(dāng)然，我們就按一開(kāi)始的思路寫(xiě)一下：top，left屬性都設(shè)為50%，看一下效果。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>div居于頁(yè)面正中間</title>   
  6.     <style type="text/css">   
  7.         *{   
  8.             margin: 0;   
  9.             padding: 0;   
  10.             background-color: #EAEAEA;   
  11.         }   
  12.         div{   
  13.             width: 200px;   
  14.             height: 200px;   
  15.             background-color: #1E90FF;   
  16.         }   
  17.         .center-in-center{   
  18.             position: absolute;   
  19.             top: 50%;   
  20.             left: 50%;   
  21.         }   
  22.     </style>   
  23. </head>   
  24. <body>   
  25.     <div class="center-in-center"></div>   
  26. </body>   
  27. </html>  

從我的截圖可以看出，div的左頂點(diǎn)剛好在頁(yè)面的中心點(diǎn)處?，F(xiàn)在的思路是，如何移動(dòng)div然后讓div的中心和頁(yè)面中心重合，即可達(dá)到我們一開(kāi)始想要的結(jié)果。在這里我要介紹一種方法，使用css的transform屬性。由于這個(gè)屬性的值很多，我這里就不一一介紹，只是說(shuō)一下它的translate。我們給剛才的center-in-center類加上translate(0,-50%)

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. .center-in-center{   
  2.     position: absolute;   
  3.     top: 50%;   
  4.     left: 50%;   
  5.     transform: translate(0, -50%);   
  6. }  

如果使用過(guò)這個(gè)屬性，應(yīng)該知道怎么回事了。translate(0, -50%)，第一個(gè)值是指水平移動(dòng)量，和tansform的translateX效果一樣，第二個(gè)值那就是垂直方向偏移量，但為負(fù)數(shù)時(shí)，代表反方向移動(dòng)?，F(xiàn)在我們只需tanslate(-50%,-50%)就可以達(dá)到div既水平居中同時(shí)垂直居中。

附上完整代碼與效果：

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>div居于頁(yè)面正中間</title>   
  6.     <style type="text/css">   
  7.         *{   
  8.             margin: 0;   
  9.             padding: 0;   
  10.             background-color: #EAEAEA;   
  11.         }   
  12.         div{   
  13.             width: 200px;   
  14.             height: 200px;   
  15.             background-color: #1E90FF;   
  16.         }   
  17.         .center-in-center{   
  18.             position: absolute;   
  19.             top: 50%;   
  20.             left: 50%;   
  21.             -webkit-transform: translate(-50%, -50%);   
  22.             -moz-transform: translate(-50%, -50%);   
  23.             -ms-transform: translate(-50%, -50%);   
  24.             -o-transform: translate(-50%, -50%);   
  25.             transform: translate(-50%, -50%);   
  26.         }   
  27.     </style>   
  28. </head>   
  29. <body>   
  30.     <div class="center-in-center"></div>   
  31. </body>   
  32. </html>  

說(shuō)多兩句，這也可以是一道非常不錯(cuò)的面試題，大家可以留意一下。當(dāng)然還有其他解法，這里就不再班門弄斧了。另外，css3的transform是一個(gè)非常強(qiáng)大的屬性，可以做很多變換3d之類的炫酷效果，如果有興趣可以深入研究一下。但前端有一個(gè)不得不說(shuō)的痛，瀏覽器兼容性問(wèn)題。。。其他的瀏覽器還好說(shuō)，萬(wàn)惡的IE，IE9支持一小部分屬性，IE9以下全部不支持。如果還深愛(ài)著IE，那只能另辟蹊徑，甚至不惜用js去解決咯！又快到周末了，又可以好好睡覺(jué)了，真好！

以上這篇如何讓一個(gè)div居于頁(yè)面正中間【實(shí)現(xiàn)方法】就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論