脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > Div+CSS教程 >

设置一个DIV块固定在屏幕中央的两种方法(推荐)

  发布时间：2016-07-25 09:17:25   作者：佚名   我要评论
下面小编就为大家带来一篇设置一个DIV块固定在屏幕中央的两种方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

方法一：

对一个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

相关文章

  • 关于div中img,span垂直居中的问题

    下面小编就为大家带来一篇关于div中img,span垂直居中的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-26

  • 解决img在div中居中的问题

    下面小编就为大家带来一篇解决img在div中居中的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-26

  • html5实现适用于手机端的div图片放大预览效果源码

    这是一款html5实现适用于手机端的div图片放大预览效果源码，共有4种不同的图片放大预览模式可供用户选择使用。可分别针对鼠标滑过、拖拽、点击等进行图片放大显示
    2016-09-21

  • DIV+CSS实现带三角箭头的提示框

    本文给大家带来一段代码基于div+css实现三角形提示框，代码简单易懂，需要的朋友可以参考下
    2016-09-20

  • div被iframe遮住的几种情况及解决方法

    这篇文章给大家介绍了div被iframe遮住的一些情况，以及被遮住后的解决办法，有需要的朋友们可以参考借鉴。
    2016-09-07

  • DIV点击折叠实例代码

    本文给大家带来一段核心代码关于div点击折叠效果，代码简单易懂，有需要的朋友可以参考下
    2016-08-31

  • DIV始终浮动在页面底部

    在页面底部浮动功能是如何实现的呢？下面小编给大家带来div始终浮动在页面底部的关键代码，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-08-30

  • CSS设置DIV垂直居中的N种方法 兼容IE浏览器

    这篇文章主要为大家详细介绍了兼容IE浏览器CSS设置DIV垂直居中的N种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-07-05

  • CSS文本和div垂直居中方法总结

    这篇文章主要介绍了CSS文本和div垂直居中方法总结，包括多行文本垂直居中,单行文本垂直居中,子div垂直居中，感兴趣的小伙伴们可以参考一下
    2016-07-04

  • CSS控制DIV层显示和隐藏的实现方法

    本文给大家带来了CSS控制DIV层显示和隐藏的方法，是前端学习必须要掌握的基础知识，非常不错，具有参考借鉴价值，感兴趣的小伙伴一起学习吧
    2016-07-01

最新评论

关注微信公众号

扫一扫