DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> 關於CSS >> 設置一個DIV塊固定在屏幕中央的兩種方法(推薦)
設置一個DIV塊固定在屏幕中央的兩種方法(推薦)
編輯：關於CSS     

方法一：

對一個div進行以下設置即可實現居中。

CSS Code復制內容到剪貼板
  1. <style>   
  2. #a{   
  3.     position: fixed;   
  4.     top: 0px;   
  5.     left: 0px;   
  6.     rightright: 0px;   
  7.     bottombottom: 0px;   
  8.     margin: auto;   
  9. }   
  10. </style>  
XML/HTML Code復制內容到剪貼板
  1. <!doctype html>  
  2. <html lang="zh-cn">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6.     <style>  
  7.         *{   
  8.             margin: 0px;   
  9.             padding: 0px;   
  10.         }   
  11.         #a{   
  12.             width: 200px;   
  13.             height: 200px;   
  14.             background-color: aquamarine;   
  15.             position: fixed;   
  16.             top: 0px;   
  17.             left: 0px;   
  18.             right: 0px;   
  19.             bottom: 0px;   
  20.             margin: auto;   
  21.         }   
  22.     </style>  
  23. </head>  
  24. <body>  
  25. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  26. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  27. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  28. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  29. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  30. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  31. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  32. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  33. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  34. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  35. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  36. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  37. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  38. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  39. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  40. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  41. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  42. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  43. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  44. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  45. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  46.     <div id="a">  
  47.         sdvcdvf   
  48.     </div>  
  49. </body>  
  50. </html>  

效果：

方法二：

使用js操作div的屬性為下面這樣即可實現居中。

JavaScript Code復制內容到剪貼板
  1. <style>   
  2.    #a{   
  3.         width: 200px;   
  4.         height: 200px;   
  5.         background-color: aquamarine;   
  6.         position: fixed;   
  7.     }   
  8. </style>   
  9.   
  10. <script>   
  11.     window.onload=function(){   
  12.         var a = document.getElementById("a");//獲取div塊對象   
  13.         var Height=document.documentElement.clientHeight;//取得浏覽器頁面可視區域的寬度   
  14.         var Width=document.documentElement.clientWidth;//取得浏覽器頁面可視區域的寬度   
  15.         var gao1 = a.offsetHeight;//獲取div塊的高度值   
  16.         var gao2 = a.offsetWidth;//獲取div塊的寬度值   
  17.         var Sgao1= (Height - gao1)/2+"px";   
  18.         var Sgao2= (Width - gao2)/2+"px";   
  19.         a.style.top=Sgao1;   
  20.         a.style.left=Sgao2;   
  21.     }   
  22. </script>  

效果：

以上這篇設置一個DIV塊固定在屏幕中央的兩種方法(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/gaotenglong/archive/2016/07/24/5701434.html

關於CSS
Div CSS實例教程：頁面制作方法
做前端也有幾年時間了，不敢說能把他看地多透，但是多多少少還是有些自己的東西。就制作而言，我將一張頁面
CSS的十八般技巧
原文作者：Roger Johansson 作者簡介：住在瑞典哥德堡，1994年開始接觸和參與web設
手把手教你用CSS實現帶箭頭的流程進度條
本文介紹的是利用純CSS的帶箭頭流程進度條，兼容到IE8，需要的朋友們下面來一起學習學習。首先寫出一

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
CSS邊界線消失的問題詳解 CSS控制用戶浏覽網頁的光標 css初學者：id和class的選擇 常用CSS縮寫語法總結 css position 設置元素的定位方式詳解 淺談css中vertical-align和line-height的用法 css 常用樣式(分享) 元素絕對定位以後設置了高寬,a標簽不能點擊的原因及解決方法 CSS布局入門 CSS基礎教程: CSS的分組(Grouping)和嵌套(Nesting)
熱門推薦
CSS3 box-sizing屬性詳解 用css樣式表實現首字大寫 css3 盒模型以及box-sizing屬性全面了解 如何在一個頁面做兩種超鏈接的CSS樣式 DIV 自動滾動功能及滾動條顏色修改的代碼 CSS3 animation實現簡易幻燈片輪播特效 CSS語法手冊（一）字體屬性 CSS圓角技術 css的margin縮寫方式
大家都在看
CSS圓角技術 如何使用ajax開發web應用程序第1/2頁 Ajax使用雜談 也許也是亂彈 JavaScript實現模仿桌面窗口的方法 網頁制作學習筆記:HTML標記表單元素 圖解prototype、proto和constructor的三角關系 當鼠標移動到圖片上時跟隨鼠標顯示放大的圖片效果 html5拍照功能實現代碼(htm5上傳文件)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved