Question

我知道使用CSS的中心事情已经被问了很多次，而且我已经看过这些，但无论我做什么，我似乎都无法将我的div整齐地集中在一起。

我的div很简单

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

我在下面有一张表，其中包含一些信息。是的，我知道桌子不是用于安排等等我知道。

<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＆amp; 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;
}

使用任何必要的手段使DIV居中

1 个答案: