簡單瞭解一下：
<!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>
大家覺得哪一種方式比較適合，歡迎大家一起來學習，有好的思路一起探討！