DIV居中布局的三大实现方法

最新推荐文章于 2023-01-04 00:19:17 发布

福龟大大

最新推荐文章于 2023-01-04 00:19:17 发布

阅读量3.5k

点赞数 1

分类专栏： JSP+HTML+JS+CSS 文章标签： div 浏览器 border css table 测试

本文链接：https://blog.csdn.net/a5489888/article/details/6656705

版权

JSP+HTML+JS+CSS 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

现在DIV+CSS布局越来越流行了，怎么实现div居中好像是个难题。本文向大家介绍一下关于DIV居中布局的几种实现方法，希望对你有所帮助。

AD：

你对DIV居中布局的方法是否了解，这里和大家分享一下，因为现在DIV+CSS布局越来越流行了，怎么实现DIV居中好像是个难题。本文给出关于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>

二，用JS使层居中

把如下代码加入<body>区域中 <DIV id=L1 style="HEIGHT: 107px; LEFT: 341px; POSITION: absolute; TOP: 585px; WIDTH: 205px; Z-INDEX: 1">

<TABLE bgColor=#ffffff border=1 borderColorDark=#ffffff borderColorLight=#000000 cellPadding=0 cellSpacing=0 width="100%">

<TR>

<TD height=1 width=178>□::BEST4U论坛::</TD>

<TD align=middle οnclick="L1.style.visibility='hidden'"

style="CURSOR: hand" width=21>х</TD></TR>

<TR vAlign=top>

<TD colSpan=2

height=91>欢迎光临本站!<BR><BR>本站域名:<BR>http://webform.cn

</TD></TR></TABLE></DIV>

<SCRIPT LANGUAGE="JavaScript">

function moveit() //这个函数用于把层放到浏览器中间

{

L1.style.left=((document.body.offsetWidth-parseFloat (L1.style.width))/2)+document.body.scrollLeft;

L1.style.top=((document.body.offsetHeight-parseFloat (L1.style.height))/2)+document.body.scrollTop;

}

window.οnlοad=moveit; //网面打开时时执行moveit()

window.οnresize=moveit; //当调整浏览器大小时执行moveit()

window.οnscrοll=moveit; //当拉动滚动条时执行moveit()

福龟大大

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
DIV居中布局的三大实现方法

现在DIV+CSS布局越来越流行了，怎么实现div居中好像是个难题。本文向大家介绍一下关于DIV居中布局的几种实现方法，希望对你有所帮助。AD：你对DIV居中布局的方法是否了解，这里和大家分享一下，因为现在DIV+CSS布局越来越流行了，怎么实现DIV居中好像
复制链接

扫一扫