现在的位置: 首页 > 综合 > 正文

页面垂直居中的两种方法

2013年11月22日 ⁄ 综合 ⁄ 共 1003字 ⁄ 字号 评论关闭

页面垂直居中的两种方法

方法一:采用表格[IE]

<HTML>
<HEAD>
<BODY>
<TABLE WIDTH="100%" HEIGHT="100%">
<TR>
<TD ALIGN="center" VALIGN="middle">
要居中的内容!
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 

方法二:采用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>

抱歉!评论已关闭.