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

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

  發(fā)布時間：2016-04-15 16:18:07   作者：佚名   我要評論
下面小編就為大家?guī)硪黄绾巫屢粋€div居于頁面正中間【實現(xiàn)方法】。小編覺得挺不錯的，現(xiàn)在分享個大家，也給大家做個參考

如何讓一個div居于頁面中間，我今天說的是讓一個div水平居中同時垂直居中，而不是簡單的top：50%，left：50%。當然，我們就按一開始的思路寫一下：top，left屬性都設為50%，看一下效果。

JavaScript Code復制內容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>div居于頁面正中間</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的左頂點剛好在頁面的中心點處。現(xiàn)在的思路是，如何移動div然后讓div的中心和頁面中心重合，即可達到我們一開始想要的結果。在這里我要介紹一種方法，使用css的transform屬性。由于這個屬性的值很多，我這里就不一一介紹，只是說一下它的translate。我們給剛才的center-in-center類加上translate(0,-50%)

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

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

附上完整代碼與效果：

JavaScript Code復制內容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>div居于頁面正中間</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>  

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

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

相關文章

  • DIV+CSS 清除浮動常用方法總結

    下面小編就為大家?guī)硪黄狣IV+CSS 清除浮動常用方法總結。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-06

  • CSS教程之div垂直居中的多種方法

    這篇文章主要為大家詳細介紹了CSS教程之div垂直居中的多種方法，還包括多行文本垂直居中的方法，感興趣的小伙伴們可以參考一下
    2016-05-05

  • 關于div與>div的區(qū)別小結

    下面小編就為大家?guī)硪黄P于div與>div的區(qū)別小結。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-04

  • Divxdra1031.Dll

    Divxdra1031.Dll
    2016-04-30

  • 圖片溢出div問題的快速解決方法推薦

    圖片溢出div問題怎么解決？下面小編就為大家?guī)硪黄獔D片溢出div問題的快速解決方法推薦。希望對大家有所幫助。一起跟隨小編過來看看吧
    2016-04-28

  • css三種方法實現(xiàn)div在瀏覽器水平居中

    這篇文章主要介紹了css三種實現(xiàn)div在瀏覽器水平居中的方法，感興趣的小伙伴們可以參考一下
    2016-04-14

  • 一個div在瀏覽器水平居中的實現(xiàn)方法

    下面小編就為大家?guī)硪黄粋€div在瀏覽器水平居中的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。
    2016-04-14

  • div+CSS制作類似微信對話氣泡效果的實例總結

    這篇文章主要介紹了div+CSS制作類似微信對話氣泡效果的實例總結,文中總結出了四種編寫方式,并且對三角形的繪制有一個補充說明,需要的朋友可以參考下
    2016-04-01

  • 兩個div疊加觸發(fā)事件發(fā)生閃爍問題的解決方法

    下面小編就為大家?guī)硪黄獌蓚€div疊加觸發(fā)事件發(fā)生閃爍問題的解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-09

最新評論