页面垂直居中问题总结
1整个页面套个大table，宽是100%，其中td中设置一高度，再在这个表格中放入你需要那个表格，设这个表格居中
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="443" ><table width="50%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
2采用frameset[NN4+,IE4+]
<HTML>
<HEAD>
<STYLE>
</STYLE>
<SCRIPT>
var url = '你的页面.htm';
function centerFrame (url, width, height) {
if (top == window) {
var w = window.innerWidth ? window.innerWidth :
document.body.clientWidth;
var h = window.innerHeight ? window.innerHeight :
document.body.clientHeight;
var w0 = Math.floor((w - width) / 2);
var h0 = Math.floor((h - height) / 2);
var html = '';
html += '<FRAMESET border=0 ROWS="' + h0 + ', ' + height + ', ' + h0 + '">';
html += '<FRAME SRC="about:blank">';
html += '<FRAMESET COLS="' + w0 + ', ' + width + ', ' + w0 + '">';
html += '<FRAME SRC="about:blank">';
html += '<FRAME NAME="main" SRC="' + url + '" SCROLLING="auto">';
html += '<FRAME SRC="about:blank">';
html += '<\/FRAMESET>';
html += '<FRAME SRC="about:blank">';
html += '<\/FRAMESET>';
document.open();
document.write(html);
document.close();
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="centerFrame(url, 400, 400);">
<!-- 400,400是你页面内容的尺寸 -->
欢迎浏览！
</BODY>
</HTML>
3.
<!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">
<!--
#wraper{
width:500px;
height:500px;
background-color:#f7f7f7;
border:#CCCCCC solid 1px;
display: table;
margin:0 auto;
}
#content{
display: table-cell;
vertical-align: middle;
text-align: center;
}
table{margin-left: auto; margin-right: auto; }
-->
</style>
<!--[if IE]>
<STYLE type="text/css">
#wraper { position: relative; }
#content { position: absolute; top: 50%; left:50%;}
#content table { position: relative; top: -50%;left:-50%;}
</style>
<![endif]-->
</head>
<body>
<div id="wraper">
<div id="content">
<table width="300" height="123" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF3333">
<tr>
<td bgcolor="#FFFFFF">1</td>
<td bgcolor="#FFFFFF">2</td>
<td bgcolor="#FFFFFF">3</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">4</td>
<td bgcolor="#FFFFFF">5</td>
<td bgcolor="#FFFFFF">6</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">7</td>
<td bgcolor="#FFFFFF">8</td>
<td bgcolor="#FFFFFF">9</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="443" ><table width="50%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
2采用frameset[NN4+,IE4+]
<HTML>
<HEAD>
<STYLE>
</STYLE>
<SCRIPT>
var url = '你的页面.htm';
function centerFrame (url, width, height) {
if (top == window) {
var w = window.innerWidth ? window.innerWidth :
document.body.clientWidth;
var h = window.innerHeight ? window.innerHeight :
document.body.clientHeight;
var w0 = Math.floor((w - width) / 2);
var h0 = Math.floor((h - height) / 2);
var html = '';
html += '<FRAMESET border=0 ROWS="' + h0 + ', ' + height + ', ' + h0 + '">';
html += '<FRAME SRC="about:blank">';
html += '<FRAMESET COLS="' + w0 + ', ' + width + ', ' + w0 + '">';
html += '<FRAME SRC="about:blank">';
html += '<FRAME NAME="main" SRC="' + url + '" SCROLLING="auto">';
html += '<FRAME SRC="about:blank">';
html += '<\/FRAMESET>';
html += '<FRAME SRC="about:blank">';
html += '<\/FRAMESET>';
document.open();
document.write(html);
document.close();
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="centerFrame(url, 400, 400);">
<!-- 400,400是你页面内容的尺寸 -->
欢迎浏览！
</BODY>
</HTML>
3.
<!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">
<!--
#wraper{
width:500px;
height:500px;
background-color:#f7f7f7;
border:#CCCCCC solid 1px;
display: table;
margin:0 auto;
}
#content{
display: table-cell;
vertical-align: middle;
text-align: center;
}
table{margin-left: auto; margin-right: auto; }
-->
</style>
<!--[if IE]>
<STYLE type="text/css">
#wraper { position: relative; }
#content { position: absolute; top: 50%; left:50%;}
#content table { position: relative; top: -50%;left:-50%;}
</style>
<![endif]-->
</head>
<body>
<div id="wraper">
<div id="content">
<table width="300" height="123" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF3333">
<tr>
<td bgcolor="#FFFFFF">1</td>
<td bgcolor="#FFFFFF">2</td>
<td bgcolor="#FFFFFF">3</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">4</td>
<td bgcolor="#FFFFFF">5</td>
<td bgcolor="#FFFFFF">6</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">7</td>
<td bgcolor="#FFFFFF">8</td>
<td bgcolor="#FFFFFF">9</td>
</tr>
</table>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号