DIV在页面中居中

最新推荐文章于 2025-11-05 20:48:02 发布

最新推荐文章于 2025-11-05 20:48:02 发布 · 73 阅读

文章标签：

#xhtml

让某个ＤＩＶ在整个页面中处于居中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV居中</title>
<style type="text/css">
html, body
{
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
vertical-align: middle;
}
span
{
vertical-align: middle;
width: 1px;
height: 100%;
display: inline-block;
}
.Container
{
width: 1010px;
height: 625px;
text-align: center;
display: inline-block;
border:solid 1px red;
}
#pic_bg
{
background-image: url(bg.jpg);
background-repeat: no-repeat;
height: 621px;
line-height: 621px;
width: 1004px;
}

</style>
</head>
<body>
<span></span>
<span class="Container">
<div id="pic_bg">
<div>居中的ＤＩＶ</div>
</div>
</span>
</body>
</html>