簡單DIV垂直居中在可視區域、DIV垂直居中在可視區域、DIV垂直居中、導航選單以下可視區域垂直居中
阿新 • • 發佈：2018-12-09
簡單瞭解一下：
<!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>
大家覺得哪一種方式比較適合，歡迎大家一起來學習，有好的思路一起探討！