div中心的div div

Question

我需要像图像中那样实现，除了加载器部分我已经完成了所有工作。 当我点击左侧的复选框时，我希望div(loade+text "updating results)位于搜索结果div的中心。

注：

1. 即使有滚动条，仍然会div(loade+text "updating results)位于中心位置。

2. div(loade+text "updating results)不会进入页面中心，而是位于搜索结果的中心（排除左侧复选框）。

请帮助将此装载机置于搜索结果的中心

**我想要附加的图像，我还没有实现它。

Answer 1

你确定你知道自己想要什么吗？

  

我希望div（loade + text“更新结果）位于中心位置   搜索结果

     

不会进入页面中心，而是进入搜索中心   resuls

我假设您希望在屏幕中央显示“更新结果”div。

您需要将其位置设置为固定以使其远离文档流，然后将位置从顶部和左侧设置为50％，最后将边距调整为元素大小的一半以考虑元件。

#updating_results_divs_id {
    position: fixed;
    height: 200px;
    width: 400px;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}

Answer 2

我认为加载div应定位absolute，如果您将其嵌套在搜索结果div中，请尝试添加此样式：

{
    left: 50%; 
    top:50%
}

Answer 3

您可以使用jQuery BlockUI 插件。 Here 是一些演示。您也可以浏览那里使用的CSS。

另外，您可以查看 Dead Center

Answer 4

    leftPos = $('.searchResultsDiv').offset().left +($('.searchResultsDiv').width() - $('.layerDiv').width())/2;
    topPos = $('.searchResultsDiv').offset().top + ($(window).height()-$('.layerDiv').height())/5;
    $('.layerDiv')
        .css('position','fixed')
        .css('left',leftPos)
        .css('top',topPos);

Answer 5

我想这可能会对未来的某些人有所帮助：

function setToCenterOfParent( obj, parentObj ) {
    var height = $( obj ).height();
    var width = $( obj ).width();
    if ( parentObj == window ) {
        $( obj ).css( 'top', ( $( parentObj ).height() / 2 ) - ( height / 2 ) );
        $( obj ).css( 'left', ( $( parentObj ).width() / 2 ) - ( width / 2 ) );
    }
    else {
        $( obj ).css( 'top', ( $( parentObj ).height() / 2 ) - ( height / 2 ) + $( parentObj ).position().top );
        $( obj ).css( 'left', ( $( parentObj ).width() / 2 ) - ( width / 2 ) + $( parentObj ).position().left );
    }
}