jquery - Foundation JS 模态居中

Question

我在使用 Foundations reveal 功能时遇到了一个奇怪的问题。它不以我的页面为中心。

http://landpros.turnpostinteractive.com/LandPros_Results_2.html

如果您转到此页面并单击主内容区域中显示“我的列表”的链接，它会向您显示模态，并且它显然不在页面中央。无论浏览器大小如何，我都希望它位于屏幕中央。

这可能吗？我可以超越 css 代码，但我很困惑为什么默认情况下它不是那样的。

<p>  
  <a class="star" href="#"></a> add to <a class="link reveal" data-reveal-id="myModal" href="#">my listing</a><br/>
</p>

<div id="myModal" class="reveal-modal ModalCSS">
  <div class="modal-header">
    <h1>Add to My Listings</h1>
  </div><!--/modal-header-->
  <div class="modal-body">
    <p class="top">Please login to use our<br/> My Listings feature.</p><br/>
    <p>My Listings allows you to save your proper-<br/>ties for future visits. It is Free! </p>

    <br/><br/>
    <p class="right">
      <a href="#">login</a> | <a href="#">create an account</a>
  </div><!--/modal-body-->
  <a class="close-reveal-modal">&#215;</a>
</div>

这是我正在使用的 HTML。

Answer 1

在此处居中对齐模态框 Css :-

#myModal2 {
            top: 50%;
            left: 50%;
            margin: -202px 0px 0px -92px;
           }