在用CSS样式表进行网页布局时，DIV水平居中的问题时常碰到的，DIV水平居中最常用到的地方就是使整个页面水平居中，这在网页布局中应用最广泛也是基本的布局方式。下面是我收集总结的使用Div和CSS实现水平居中的方法以及使用js实现层居中的方法。

一、CSS DIV实现水平居中

使用margin:auto 0 与 text-aligh:center实现水平居中

在Internet Explorer 7、Firefox、Opera等现代浏览器实现水平居中的方法很简单，只要设定到左右两侧的空白为自动即可。即：

#wrap { margin:0 auto;}

上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置，上下为0（可以为任意）。请在现代浏览器（如Internet Explorer 7、Firefox、Opera等）中运行现在的代码：

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞ new document ＜/title＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞
＜style type="text/css"＞
div#wrap {
width:760px;
margin:0 auto;
border:1px solid #333;
background-color:#ccc;
}
＜/style＞
＜/head＞
＜body＞
＜div id="wrap"＞

在Firefox等浏览器设定页面元素水平居中，只要指定margin:0 auto;即可，如下：

div#wrap {
width:760px;
margin:0 auto; /*这里的0可以任意值*/
border:1px solid #ccc;
background-color:#999;
}

上面的效果很好。但是这在Internet Explorer 6及改正的版本中是不起作用的，不过幸好它有自己的解决办法。在Internet Explorer中text-align属性是可继承的，即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text- align属性值为center，这样页面内所有的元素都会自动居中，同时我们还要加一个hook把页面中的文字变成我们习惯的阅读方式——居左对齐。因 此我们要如此来写代码：

body {text-align:center;}
#wrap {text-align:left;}

这样在Internet Explorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果，我们就可以这样写我们的代码：

body { text-align:center; }
#wrap { text-align:left;
margin:0 auto;
}
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞ CSS+Div实现水平居中对齐的页面布局 ＜/title＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞
＜style type="text/css"＞
body { text-align:center; }
div#wrap {
text-align:left;
width:760px;
margin:0 auto;
border:1px solid #333;
background-color:#ccc;
}
＜/style＞
＜/head＞
＜body＞
＜div id="wrap"＞

在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto;即可

div#wrap {
width:760px;
margin:0 auto; /*这里的0可以任意值*/
border:1px solid #ccc;
background-color:#999;
}

在Internet Explorer 6 及以下的版本中我们还要做以下的设置：

body { text-align:center; }
div#wrap {
text-align:left;
}

不过这里有一个前提，就是设置居中的元素要有固定的宽度，比如这里我们设定了为760像素。

二，用JS使层居中

把如下代码加入区域中

<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=center onclick="L1.style.visibility='hidden'"
 
style="CURSOR: hand" width=21>х</TD></TR>
 
<TR vAlign=top>
 
<TD colSpan=2
 
height=91>欢迎光临本站!<BR><BR>本站域名:<BR>http://it.dengchao.org
 
</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.onload=moveit; //网面打开时时执行moveit()
 
window.onresize=moveit; //当调整浏览器大小时执行moveit()
 
window.onscroll=moveit; //当拉动滚动条时执行moveit()
 
</SCRIPT>

好了，使用Div和CSS实现水平居中的方法以及使用js实现层居中的方法就介绍到这里。

本文收集整理自网络。