1、CSS方法
<!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=utf-8" />
<title>根据内容宽度、高度自适应，垂直水平居中，内容高度超过窗体时，垂直居顶</title>
<style type="text/css">
html { height:100%;}
body { height:100%; text-align:center;}
.centerDiv { display:inline-block; zoom:1; *display:inline; vertical-align:middle; text-align:left; width:200px; padding:10px; border:1px solid #f60; background:#fc0;}
.hiddenDiv { height:100%; overflow:hidden; display:inline-block; width:1px; overflow:hidden; margin-left:-1px; zoom:1; *display:inline; *margin-top:-1px; _margin-top:0; vertical-align:middle;}
</style>
</head>
<body>
<div class="centerDiv">
高度自适应，垂直水平居中<br/>
高度自适应，垂直水平居中<br/>
高度自适应，垂直水平居中<br/>
高度自适应，垂直水平居中<br/>
高度自适应，垂直水平居中<br/>
高度自适应，垂直水平居中<br/>
高度自适应，垂直水平居中
</div>
<div class="hiddenDiv"></div>
</body>
</html>
2、JS方法
<div id="container">内容部分高648px。
</div>
<script type="text/javascript">
<!--
var heightdiv = 648;
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight)
{
winHeight = document.documentElement.clientHeight;
}
if(winHeight>heightdiv){
var Nonebodyheight = winHeight - heightdiv
document.getElementById("container").style.marginTop = Nonebodyheight/2 + "px";
}
else{document.getElementById("container").style.marginTop = "0px";}
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
//-->
</script>
相关推荐
在本文中，我们将深入探讨如何使用C#编程语言来实现自适应大小的窗体和控件，这在创建用户界面时特别有用，特别是在设计响应式应用程序时。标题提及的"自适应大小的C#源码"是关于创建一个能够根据窗体尺寸变化自动...
4. **文本居中**：在`DrawString`中，我们可以设置`StringFormat`对象的`Alignment`和`LineAlignment`属性为`StringAlignment.Center`，使得文本在单元格内水平和垂直居中。 5. **图像处理**：绘制完成后，如果需要...
例如，若要让控件始终位于窗体的中心，只需设置`Top`属性，控件将始终保持与窗体顶部的距离不变，从而实现垂直居中。类似地，如果只想让控件的宽度随窗体宽度变化，可以设置`Left`和`Right`属性，这样控件的左侧和...
5. **自动排列控件**：为了实现自动排列，可以编写一段代码，遍历Panel内的所有控件，根据预先设定的间距和排列规则（如水平或垂直）调整控件的位置。 例如，你可以创建一个方法，接收控件宽度和高度，以及间距作为...
5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...
5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...