当前位置：首页 → 问答吧 → 怎样才能使一个固定长高的div随页面的变化始终保持水平和垂直居中

怎样才能使一个固定长高的div随页面的变化始终保持水平和垂直居中

时间：2006-06-09

来源：互联网

怎样才能使一个固定长高的一个或多个div随页面的变化始终保持水平和垂直居中
比如：div-1的width=200 height=100;div-2的width=300 height=50;

作者: ycg520520 发布时间: 2006-06-09

不理解你的意思！

作者: welcome51cc 发布时间: 2006-06-10

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>
<body>
<div id="1">111111111111111</div>
<div id="2">222222222222222</div>
</body>
</html>
请看这段代码，这两个div是水平居中的，不管阅览器拉大还是拉小都保持水平方向是居中的，可在垂直方向始终在顶部，我现在想这两个div也同水平方向一样，不管怎样拉阅览器始终保持在阅览器的正中。

作者: ycg520520 发布时间: 2006-06-10

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
<td align="center" valign="middle"><table width="50" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
   <tr>
      <td></td>
   </tr>
</table>
   <table width="50" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999">
      <tr>
      <td></td>
      </tr>
   </table></td>
  </tr>
</table>
</body>
</html>
这是用表格做的，很好办，可惜用div我就始终弄不出来。

作者: ycg520520 发布时间: 2006-06-10

没办法

作者: hellojane 发布时间: 2006-06-13

http://topic.csdn.net/t/20060825/16/4975849.html这个可以解决你的问题，因为我也在弄，但是我不会写js

作者: zjzhoujunjz 发布时间: 2010-05-21

你可以用绝对定位然后加负边距，前提是为固定高宽的这两个div包裹一个同样固定高宽的div。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body{ text-align:center;margin:0; } #d1{ margin:auto; width:200px; height:100px; background-color:#996633; line-height:100px; } #d2{ width:300px; height:50px; background-color:#FFCC33; line-height:50px; } #wrapper{ width:300px; height:150px; position:absolute; top:50%; left:50%; margin-top:-75px; margin-left:-150px; } </style> </head> <body> <div id="wrapper"> <div id="d1">111111111111111</div> <div id="d2">222222222222222</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

不看日期的后果啊...居然是这么久的帖子...

[ 本帖最后由 iifksp 于 2010-5-21 15:01 编辑 ]

作者: iifksp 发布时间: 2010-05-21

你的意思应该是不论页面多长滚动条在哪里 DIV 都在页面中间吧

给body和div分别加个position的属性然后加上div的top：*px； left：* px；貌似可以了，不知道是不是要这样的效果

作者: kelanshe 发布时间: 2010-05-22

这个问题网上有问的，也有答案。最佳就是绝对定位加负边距。只要理解了绝对定位加负边距这种方法的原理，以后再遇到这种情况就迎刃而解了。

顶一下7楼的兄弟

作者: qiubi8801 发布时间: 2010-05-22

腾讯的面试题？

作者: rizz 发布时间: 2010-05-22

7楼的方法也不是为一个良策

作者: wangsdong 发布时间: 2010-05-22

引用:

原帖由 iifksp 于 2010-5-21 14:40 发表
你可以用绝对定位然后加负边距，前提是为固定高宽的这两个div包裹一个同样固定高宽的div。
[html]

无标题文档

body{
   text-align:center;margin:0;
}
#d1{
   margin:auto;
   width:200px;
   h ...

不错，学习了

作者: supergouki 发布时间: 2010-09-14

怎样才能使一个固定长高的div随页面的变化始终保持水平和垂直居中

引用:

热门阅读

热门下载