简单了解一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV垂直居中在可视区域/有固定定位的导航菜单以下可视区域垂直居中</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style>
body{margin: 0;padding: 0;}
</style>
</head>
<body>
<div style="width: 100%;height: 80px;background: #1d18ff;position: fixed;top: 0;z-index: 100;"></div>
<div class="content" id="content" style="background: #ffa0be;height: 500px;">
Hello World
</div>
</body>
<script type="text/javascript">
$(function () {
var wheight = $(window).height();//可视区域高度
var cheight = $('#content').height();//内容高度
//说明：需要弄清楚内容相对的位置
/* start */
//没有导航菜单的情况
// var centerh = (wheight-cheight)/2;
// $('#content').css('margin-top',centerh+'px');
/* end */
/* start */
//导航菜单固定定位的情况->主要是固定的那一部分也需要平分高度
/*
//第一种
var navh = wheight-80;//计算方式：首先 可视区域高度 减去 导航菜单的高度 = 新高度
var laveh = navh-cheight;//计算方式：然后 新高度 减去 内容高度 = 剩余高度
var equalh = laveh/2;//计算方式：接着 剩余高度 除以2 = 平分高度
var centerh = equalh+80;//计算方式：最后 平分高度 加上 导航菜单高度 = 居中高度
*/
/*
//第二种
var laveh = wheight-cheight;//计算方式：然后 可视区域高度 减去 内容 的高度 = 剩余高度
var equalh = laveh/2;//计算方式：接着 剩余高度 除以2 = 平分高度
var centerh = equalh+(80/2);//计算方式：最后 平分高度 加上 导航菜单高度 除以2 = 居中高度
*/
//整理后的计算方式：((可视区域高度 减去 内容高度) 加上 导航高度) 除以2 = 居中高度
var centerh = ((wheight-cheight)+80)/2;
$('#content').css('margin-top',centerh+'px');
/* end */
});
</script>
</html>大家觉得哪一种方式比较适合，欢迎大家一起来学习，有好的思路一起探讨！