本文介绍了一种使网页内容在浏览器窗口中垂直居中，并保持页脚始终位于底部的设计方法。通过调整HTML和CSS属性，如height、min-height和vertical-align，确保了页面元素的正确布局。
以下面为例：
<body>
<div class="main">主体内容<div>
<div class="footer">footer</div>
</body>1、首先添加，
html,body{
height:100%;
}
使页面充满整个浏览器窗口
2、为Logo以及登陆、注册表单的父容器main添加
.main{
min-height:100%;
height:100%;
}min-height表示如果内容高度大于设定值，高度随内容扩张，小于设定值，则为设定值，本例为100%，即整个浏览器窗口。
将main容器的height值设为100%，充满整个浏览器窗口，则footer需要下拉进度条才能查看。
3、main容器内子容器应用vetical-align:middle就可以保证无论浏览器高度多高，内容始终垂直居中
4、此时只需要将藏在进度条下的footer固定在底部就完成了页面的设计
假设footer的高度为50px,为main添加样式
.main{
margin-bottom:-50px;
}上述代码将main容器的底部外边距“向上拉了”50个像素，让footer始终保持在浏览器的底部。
以上两个设计的关键点是：
1、主体内容始终保持垂直居中
2、页脚始终保持在浏览器底部
Ps:关于如何使用vetical-align:middle垂直居中块级元素请看下一篇
扫一扫
1669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
