html - 使用任何必要的方式使 DIV 居中

Question

我知道使用 CSS 居中的问题已经被问了很多次，我也看过这些，但无论我做什么，我似乎都无法让我的 div 整齐地居中。

我的div很简单

<div id="overlay">
   <img src="~/Content/images/loading.gif" id="img-load" />
</div>

我在下面有一个表格，其中包含一些信息。是的，我知道 table 不是用来布置的，我知道。

<table id="uploadTable" style="width:100%;">
<tr valign="top">
    <td width="100%">
        something in here
    </td>
</tr>
<tr>
    <td>
        something in here
    </td>    
</tr>

在这个表声明之后，我有 jQuery 来实际确定覆盖的宽度和位置。工作正常，但并不总是完美，而且在我的移动 Android 设备上也从来没有(总是在 div 所在位置的左边距)。

<script>           
    $table = $("#uploadTable");                

    $("#overlay").css({
        opacity: 0.9       
        // current 'busy' logo has width of 200, so need to offset width by half that.
        ,left:  (($table.outerWidth()- 100)/2)
        });
</script>

我的叠加层的 CSS 是这样的:

#overlay { 
display:none;     
position:absolute; 
background:#fff; 
z-index: 10;  }

因此，我能够(主要)使它居中的唯一方法是使用一些数学，如 ("#overlay").css 代码中所示。

我尝试的一切总是将图形放在父位置的最左边我试过 margin-left: auto;右边距:自动；我已经尝试过 jquery.position()

有人看到这里有什么明显的错误吗？感谢您的帮助!

Answer 1

来自 Kunalbhat，谢谢!

http://codepen.io/kunalbhat/full/BuDLo

使用两个单独的 div，一个用于覆盖层，一个用于位于其上的图形。我使用 jQuery.fadeIn 和 fadeOut 将显示更改为可见/不可见。再次感谢!

这是我的 CSS:

#modal-overlay {
  background: gray;
  opacity: .75;
  display:none;     
  bottom: 0;
  height: auto;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index:10;
}




#modal-box {
  display:none;     
  background: white;
  bottom: 0;
  height: 200px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  z-index:15;
}