Jquery 如何在垂直和水平方向上精确居中放置div?

Jquery 如何在垂直和水平方向上精确居中放置div?,jquery,html,css,internet-explorer,centering,Jquery,Html,Css,Internet Explorer,Centering,我是CSS的新手,但我尝试了不同的方法,但我就是不能让我的div垂直居中 家长: #ModalScroll{ position:absolute; top:0; left:0; z-index:1001; height:1px; width:1px; overflow:hidden; display:none; font-size:100%; text-align:left; } 儿童: .ModalDialog

我是CSS的新手,但我尝试了不同的方法,但我就是不能让我的div垂直居中

家长:

#ModalScroll{
    position:absolute;
    top:0;
    left:0;
    z-index:1001; 
    height:1px;
    width:1px;
    overflow:hidden;
    display:none;
    font-size:100%;
    text-align:left;
}
儿童:

.ModalDialog{
    border:1px solid #3C4749;
    background-color:#FFF;
    margin:0 auto 0 auto;
    display:none;
    font-size: 12px;
    box-sizing: border-box; 
    width: 280px;
    height: 160px; 
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -80px 0 0 -140px;
}

我不知道jQuery中的解决方案是否更好,但我更喜欢CSS中的解决方案。

为了确保CSS得到充分利用,您是否使用了firebug?(可能是其他CSS重载了项目的某些属性…)

应该做到这一点(如中所述) 可能尝试在每个属性中添加“!important”

编辑:这是带有“!important”标记的css:

试试这个:

HTML

<div class="divContent">
    content goes here
</div>

这是你的问题代码

HTML代码:



希望这有助于我已经看到并尝试过这两种方法的可能副本。另一种方法:-.divContent{display:table cell;text align:center;vertical align:middle}当我与firebug进行检查时,我发现:我想删除那个黄色矩形。在firebug的左边,你有一个“样式”块,你可以看到什么样式被应用到你的元素上。“保证金:自动”不是被剥离了吗?你的HTML中有一个“左”、“上”、“边距上”应该删除以获得正确的结果。。。当你删除它们时,你能做一个屏幕截图吗?我得到了一个element.style,它覆盖了我的css,因为它是一个现有的应用程序。这个对话框被许多模块使用,我怎么能覆盖它,但只针对这个类?我不想弄乱其他元素。样式您可以在css中添加“!important”。这表示“不要覆盖此属性”。例如,在css中,输入“margin:auto!”!重要的;'(我编辑了答案)顺便说一句,“element.style”意味着是HTML中的属性覆盖了HTML(the>),难道你没有掌握HTML代码并删除不需要的样式吗?
position:absolute !important;
left:0 !important;
right:0 !important;
top:0 !important;
bottom:0 !important;
margin:auto !important;
<div class="divContent">
    content goes here
</div>
.divContent {
    width: 200px;
    height: 300px;
    border: 1px solid red;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}
<div class="maindiv">
    <p class="hdiv">JSFIDDLE V</p>
</div>
<br>
<div class="maindivh">
    <p class="hdih">JSFIDDLE H</p>
</div>
.maindiv {   position:relative; border:1px solid #cfcfcf; height:50px; width:200px; }

.hdiv {width:200px; text-align:center; height:50px;}

.maindivh { position:relative; border:1px solid #cfcfcf; height:150px; width:200px; }

.hdih { vertical-align:middle; display:table-cell; line-height:150px; text-align:center; width:200px; }