怎么让DIV永远居中在浏览器的中央，用CSS或JS或是两者结合都行，高手请进呀！给具体例子，分少可以加
3个回答
展开全部
做个变换菜单的DIV居中问题搞了我几个小时,在网上搜到的都不是很理想,终于测试出来一个方法来,这个方法绝对有效,当你真的拿DIV没办法的时候可以试试.
<style type="text/css">
#center {
position:absolute;
width:300px;
height:60px;
left:50%;
top:50%;
z-index:1;
background-color:#000;
color:fff;
margin-left:-150px;
margin-top:-32px
}
</style>
</head>
<body>
<div id="center">绝对在中间</div>
</body>
============以下是网上其他的一些方法,供参考==============
在div+css布局中，居中问题是每个初学者都会碰到的问题：
1.水平居中
举例代码如下:
<!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>demo</title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
text-align: center;/*--for IE5.0--*/
}
#layout{
margin: 0 auto;/*--居中 --*/
width: 760px;/*--宽度必须的--*/
text-align: left;
background: #F6F6F6;
}
pre{
padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="layout"><pre>
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
text-align: center;/*--for IE5.0--*/
}
#layout{
margin: 0 auto;/*--居中 --*/
width: 760px;/*--宽度必须的--*/
text-align: left;
background: #F6F6F6;
}
pre{
padding: 15px;
}
</pre>
</div>
</body>
</html>
2.另外，经典论坛阿捷的例子：
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center {
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
}
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
完整举例代码如下：
<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
}
</style>
</head>
<body>
<div id="center"></div>
</body></html>
3.垂直居中
若BOX的宽度和高度已知：
<!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></title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
}
#layout{
position: absolute;/*--绝对定位--*/
top: 50%;
left: 50%;
margin-top: -240px;/*--div高度的一半--*/
margin-left: -320px;/*--div宽度的一半--*/
width: 640px;
height: 480px;
background: #ECECEC;
}
pre{
padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="layout"><pre> body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
}
#layout{
position: absolute;/*--绝对定位--*/
top: 50%;
left: 50%;
margin-top: -240px;/*--div高度的一半--*/
margin-left: -320px;/*--div宽度的一半--*/
width: 640px;
height: 480px;
background: #ECECEC;
}
pre{
padding: 15px;
}
</pre></div>
</body>
</html>
解释：如果把屏幕中点设为坐标原点（0 0），X的正方向是屏幕的右边，Y的正方向屏幕的上边。那么在已知BOX宽度和高度的情况下，设BOX的属性为绝对定位，top：50% left：50%，这样的话，BOX的左上角就在坐标原点（0 0）， 设margin-left：-320px(宽度的一半), 左上角的坐标（-320 0），再设margin-top：-240px（高度的一半），左上角的坐标现在是（-320 240），相对原点来说， BOX是完全居中了，四个顶点的值分比别是（320 240）Ⅰ， （-320 240）Ⅱ，（-320 -240）Ⅲ ，（320 -240）Ⅳ。
适用于首页带语言选择版本或者欢迎页。
单行文字可采用行高来实现垂直居中，或者用padding来调整。
4.另一个方法:
<div style="border: 1 solid red;position: absolute;top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);">我站在中央了<br>center</div>
</div>
<div style="border: 1 solid #C0C0C0;"><br><br><br><br><br><br><br><br>
<div style="border: 1 solid red;position: absolute;top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);">我站在中央了<br>center</div>
<style type="text/css">
#center {
position:absolute;
width:300px;
height:60px;
left:50%;
top:50%;
z-index:1;
background-color:#000;
color:fff;
margin-left:-150px;
margin-top:-32px
}
</style>
</head>
<body>
<div id="center">绝对在中间</div>
</body>
============以下是网上其他的一些方法,供参考==============
在div+css布局中，居中问题是每个初学者都会碰到的问题：
1.水平居中
举例代码如下:
<!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>demo</title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
text-align: center;/*--for IE5.0--*/
}
#layout{
margin: 0 auto;/*--居中 --*/
width: 760px;/*--宽度必须的--*/
text-align: left;
background: #F6F6F6;
}
pre{
padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="layout"><pre>
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
text-align: center;/*--for IE5.0--*/
}
#layout{
margin: 0 auto;/*--居中 --*/
width: 760px;/*--宽度必须的--*/
text-align: left;
background: #F6F6F6;
}
pre{
padding: 15px;
}
</pre>
</div>
</body>
</html>
2.另外，经典论坛阿捷的例子：
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center {
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
}
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
完整举例代码如下：
<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
}
</style>
</head>
<body>
<div id="center"></div>
</body></html>
3.垂直居中
若BOX的宽度和高度已知：
<!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></title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
}
#layout{
position: absolute;/*--绝对定位--*/
top: 50%;
left: 50%;
margin-top: -240px;/*--div高度的一半--*/
margin-left: -320px;/*--div宽度的一半--*/
width: 640px;
height: 480px;
background: #ECECEC;
}
pre{
padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="layout"><pre> body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
}
#layout{
position: absolute;/*--绝对定位--*/
top: 50%;
left: 50%;
margin-top: -240px;/*--div高度的一半--*/
margin-left: -320px;/*--div宽度的一半--*/
width: 640px;
height: 480px;
background: #ECECEC;
}
pre{
padding: 15px;
}
</pre></div>
</body>
</html>
解释：如果把屏幕中点设为坐标原点（0 0），X的正方向是屏幕的右边，Y的正方向屏幕的上边。那么在已知BOX宽度和高度的情况下，设BOX的属性为绝对定位，top：50% left：50%，这样的话，BOX的左上角就在坐标原点（0 0）， 设margin-left：-320px(宽度的一半), 左上角的坐标（-320 0），再设margin-top：-240px（高度的一半），左上角的坐标现在是（-320 240），相对原点来说， BOX是完全居中了，四个顶点的值分比别是（320 240）Ⅰ， （-320 240）Ⅱ，（-320 -240）Ⅲ ，（320 -240）Ⅳ。
适用于首页带语言选择版本或者欢迎页。
单行文字可采用行高来实现垂直居中，或者用padding来调整。
4.另一个方法:
<div style="border: 1 solid red;position: absolute;top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);">我站在中央了<br>center</div>
</div>
<div style="border: 1 solid #C0C0C0;"><br><br><br><br><br><br><br><br>
<div style="border: 1 solid red;position: absolute;top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);">我站在中央了<br>center</div>
追问
老大不行呀
追答
支持 IE5 IE5.5 IE6 IE7 FF ，关键是由css样式控制,并且不用去掉文档开头的声明！！！差点搞死人了
风干的果子
WEB_前端！Q群号:29032448
试试这个。不容易啊。采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
例如我有个div，先让他隐藏起来，然后我在页面中点击超链接，让这个DIV显示有个定位的属性你设置下就可以了,名称是position,有三个属性值fixed,absolute
追问
老大，你先用DW测试好了（或是其他软件），能实现我说的效果你再发上来好不，通过分绝对会给你的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用CSS把DIV定位中心后， 设置背景滚定不滚动不就完了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
