真的没有高度为100%的div吗？网上有也只是ie里面的。

laosan 2007-06-25 10:54:14

我要实现一个图片放在浏览器水平、垂直都居中的情形。无论窗口怎么改变大小，她都在中间。

...全文

236 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

sanpizi 2007-06-27

打赏
举报

#VerticalAlign {
height: 100%;
width: 100%;
}
#VerticalAlign #m1 {
position: absolute;
text-align: center;
top: 50%;
}
#VerticalAlign #m1 #m2 {
position: relative;
top: -50%;
border: 1px solid #999999;
text-align: center;
width: 500px;
vertical-align: middle;
padding: 10px;
margin: 0px auto 0px auto;
}

利用IE Bug

ericloot 2007-06-25

打赏
举报

mark

飘零雾雨 2007-06-25

打赏
举报

简单的水平及垂直居中解决方案：

<!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>test</title>
<style type="text/css">
html,body {margin:0;height:100%;text-align:center;}
div,table {margin:auto;height:100%;}
table {vertical-align:middle;}
</style>
</head>
<body>
<div>
<table>
<tr><td><img src="*.gif" alt="传说中的水平居中和垂直居中" title="传说中的水平居中和垂直居中" /></td></tr>
</table>
</div>
</body>
</html>

飘零雾雨 2007-06-25

打赏
举报

大部分浏览器下的100%的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>test</title>
<style type="text/css">
html,body {margin:0;height:100%;text-align:center;}
div {margin:auto;height:100%;}
</style>
</head>
<body>
<div>传说100%的DIV</div>
</body>
</html>

xwoniu 2007-06-25