您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章给大家介绍DIV居中布局的三大实现方法分别是什么，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
你对DIV居中布局的方法是否了解，这里和大家分享一下，因为现在DIV+CSS布局越来越流行了，怎么实现DIV居中好像是个难题。
关于DIV居中布局的几种实现方法
现在DIV+CSS布局越来越流行了，怎么实现DIV居中好像是个难题。本文给出关于DIV居中布局的几种实现方法，相信会对大家有所帮助。
***种方法:
body{ margin:0pxauto; text-align:center; }但是如果没申明下面这句解析方法,页面就会出错.不能居中对齐!
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
但是有时候页面并不能全部按上面规定的代码格式来编写,比如说要改多彩滚动条.
第二种方法:
margin-left:50%; left:-width/2;
这里的width不是CSS中的Width,而是你的DIV的宽度例如你的div是768px宽，那么你就应该设置left:-384px。
第三种方法:使用JS来控制DIV居中.
在页面之中添加了下面的一小段代码.
<scriptlanguagescriptlanguage="javascript"type="text/javascript"src="function.js">script>
function.js内容:
if(window.screen.width>800){document.write("<styletypestyletype=\"text/css\"> body{margin-left:"+(window.screen.width-800)/2+"px}style>");}经过测试.可以正常居中
补充一点:上面这段JS必须放在你的***一个CSS连接或的后面.
◆下面是DIV居中这种方法的详细讲解:
首先解释一下JS中窗口和网页的几种尺寸属性的含义
document.body.clientWidth（网页可见区域宽）：是指浏览器显示网页的区域宽度，不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。
document.body.clientHeight（网页可见区域高）：是指浏览器显示网页的区域所能看到的高度，不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。
document.body.scrollTop（网页被卷去的高）：是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。
document.body.scrollLeft（网页被卷去的左）：是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。
现在我们来分析一下程序该如何实现DIV居中：
◆***步我们要实现的是使层在弹出时绝对居中不去考虑是否有滚动条的情况。
1.计算出层距离显示区域左边和上边的位置
注意：divId指的是所要居中的层,divId.clientWidth为其宽度！＠
vardivId=document.getElementById("xxx");
varv_left=(document.body.clientWidth-divId.clientWidth)/2;
varv_top=(document.body.clientHeight-divId.clientHeight)/2;
2.把得到的值重新赋给DIV的left和top属性
divId.style.left＝v_left;
divId.style.top=v_top;
说明：divId为DIV标签的id值
这样这个层就是居中显示的了。
◆第二步我们要实现的是使在拖动滚动条的情况下弹出的层也能居中。
其实很简单我们只要把拖动的宽度和高度加到前面计算出来的左边距和上边距中就OK了。
v_left+=document.body.scrollLeft;
v_top+=document.body.scrollTop;
完整代码如下：
> <html> <head> <title>弹出的层居中显示title> <metanamemetaname="generator"content="editplus"> <metanamemetaname="author"content=""> <metanamemetaname="keywords"content=""> <metanamemetaname="description"content=""> head> <body> <tablewidthtablewidth=100%> <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> table> <dividdivid=mxhstyle="position:absolute;left:200px;top:30px;width:200px;height:200px; background-color:navy;border:2px">我是居中显示的了。div> body> html>
主要是这句代码起的作用:(window.screen.width-800)/2//计算页面应该留出的边距数值.800为我的DIV宽度+滚动条宽度.实际应用改为你自己的大小.
关于DIV居中布局的三大实现方法分别是什么就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。