当前位置：首页 → 问答吧 → 请教一下简单的div在整个页面居中显示的问题

请教一下简单的div在整个页面居中显示的问题

时间：2011-09-05

来源：互联网

想让一个div框在整个浏览器页面中居中显示，代码如下,发现居中不了，把第一行代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">去掉后，就可以居中了，请教一下，这是什么原因

<!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>DIV居中</title>
<style type="text/css">
body
{
margin: 0px;
text-align: center;
}
#one
{
width: 1000px;
height: 625px;
border:solid 1px red;
}
</style>
</head>
<body>
<div id="one">居中的ＤＩＶ</div>
</body>
</html>

作者: jinnengqi 发布时间: 2011-09-05

HTML code

<!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>DIV居中</title>
  <style type="text/css">
  body
  {
  width:100%;
  margin: 0px;
  text-align: center;
  }
  #one
  {
  width: 1000px;
  margin:0 auto;
  height: 625px;
  border:solid 1px red;
  }
</style>
</head>
<body>
  <div id="one">居中的ＤＩＶ</div>
</body>
</html>