首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / CSS 阅读数： 1603
收藏 0 赞 0 分享

方法一：

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

更多精彩内容其他人还在看

2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼

这篇文章主要介绍了2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以参考下
收藏 0 赞 0 分享

前端设计师需要了解的9个问题

这篇文章主要介绍了前端设计师需要了解的9个问题以及注意事项，非常的实用，是篇非常不错的文章，这里推荐给大家
收藏 0 赞 0 分享

CSS强制性换行的方法区别详解

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
收藏 0 赞 0 分享

CSS语义化命名方式及常用命名规则

本文搜集了一些CSS语义化命名方式以及命名规则。如有错误或不妥之处，敬请指出，欢迎你提出更好的建议，加插更多的命名规范。
收藏 0 赞 0 分享

ul li内容宽度的问题的解决方案

在IE6下只要我设置LI的宽度为auto，不论LI里面的内容多长，LI的宽度始终是100%，即UL的宽度(这里我已经写死了UL的宽度)。设置max-width也没用。高手们，在IE系列浏览器中如何使LI的宽度真正的随着内容增长而增长呢？像FF那样。
收藏 0 赞 0 分享

html5+css3气泡组件的实现

本文是html5+css3系列教程的第一篇，给大家讲述html5+css3实现气泡组件，讲解的十分的详细，这里推荐给大家，希望对大家能有所帮助
收藏 0 赞 0 分享

html5+css3之CSS中的布局与Header的实现

本文从CSS3的布局（CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox简介）Header布局的实现（float实现布局、Header js的实现）向我们展示了HTML5与CSS3的魅力。
收藏 0 赞 0 分享

一款恶搞头像特效的制作过程 利用css3和jquery

今天给大家介绍一款恶搞头像特效的制作过程，你可以把任意一张照片放到跳舞的漫画中，为他带上不同的帽子，让他翩翩起舞，下面我们一起来看一下制作过程和效果
收藏 0 赞 0 分享

大图片根据分辨率自适应宽度仍居中显示

一个1920*900的大图，在1024*768的分辨率下仍居中显示，如何做到这一点，下面是一个可行的解决方案
收藏 0 赞 0 分享

CSS3提交意见输入框样式代码

这个提交意见输入框，结构使用到了table，样式用的css3，包含了多方面的知识，比较适合新手朋友们
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22