說到這個問題，100%的前端工程師都遇到過。但是這個問題又是不太好形容，所以對此做解釋的人自然很少，這里，我要對這個問題，做一下解釋，以一個實際的例子引出話題，分析問題。下面先看下，在各種機型上支持的效果。

Nexus 5X

---

iphone6

---

Galaxy note3

---

Ipad

---

iphone6 plus

接下來就是代碼部分了：

HTML

---

<!--彈框--> <div class="arrow_mask"></div> <div class="arrow-body"><div class="arrow-body-header">萌店火拼節拼團規則</div><div class="arrow-body-text"><div class="text-mes">1、活動時間：2016年11月7日10點至2016年11月14日10點。其中，2016年11月10日22點至2016年11月14日10點為活動正式開搶時間，其余時間用戶可搶先收藏活動商品，提前了解“11.11萌店火拼節”活動價。</div><div class="text-mes">2、活動期間一個用戶ID所獲紅包同一訂單均不可疊加使用。紅包不適用于秒殺團。紅包具體使用規則可以進入萌店app“萌團長-卡券”查看，紅包一經使用概不退回。</div><div class="text-mes">3、紅包活動僅面向萌店普通消費者，在獲取和使用紅包過程中，若出現違規行為（如作弊領取、惡意套取等），萌店有權取消批量刷取的抵用券使用權（含已使用的抵用券和未使用的抵用券）。</div><div class="text-mes">4、萌店擁有法律范圍內的活動解釋權。</div><div class="close"><img src="../../../imgs/venue/icon-close.png" alt="picture"/></div></div></div>

CSS

.arrow_mask {display: none;position: fixed;top: 0;left: 0;bottom: 0;right: 0;z-index: 1600;background: #333333;opacity: 0.8; }.arrow-body{display: none;width: 82%;height: 362px;position: absolute;z-index: 1601;/* top: 80px; */background: #ffffff;border-radius: 8px;margin-left: 9%; } .arrow-body-header{height: 46px;line-height: 46px;color: #FFFFFF;background: #ee0a3b;text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;font-size: 16px; } .arrow-body-text{font-size: 11px;color: #333; } .text-mes{margin-top: 10px;width: 100%;padding-right: 20px;padding-left: 20px; } .close img{width: 40px;height: 40px;position: absolute;left: 50%;margin-left: -20px;bottom: -20px; }

JS

"use strict"; window.onload = function (){var sightHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var top = (sightHeight-350)/2;$(".arrow-body").css({top:top+"px"});$(".close").click(function(){$(".arrow_mask").hide();$(".arrow-body").hide();}); }

JS的部分需要簡介一下，這里的原理是這樣的：

1-通過window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 獲取當前頁面的可視高度；

2-然后在使用可視高度減去彈框的高度除以二的結果，作為彈框距離頂部的距離。這樣不管頁面實際高度多長，彈框時鐘會在頁面的中心。

3-但單擊關閉按鈕的時候，讓彈框隱藏

總結

以上是生活随笔為你收集整理的弹框在一个很的长页面居中显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。