Why is my div not centered properly?

Question

I am using $ .blockUI with jQuery to show a modal dialog. HTML looks like this:

<div id="progressDialogue" class="mp_modalpopup">
    <div class="mp_container">
        <div class="mp_header">
            <span id="pd_header_text" class="mp_msg">Please wait..</span>
        </div>
        <div class="mp_body">
            <img src="ajax-loader.gif" style="text-align:center" alt="loading" />
        </div>
    </div>
</div>

CSS looks like this:

.mp_modalpopup
{
    font-family: arial,helvetica,clean,sans-serif;
    font-size: small;
    padding: 2px 3px;
    bottom: 50%;
    right: 50%;
    position: absolute;
    width: 400px;
    z-index:999;    
}

.mp_container
{
    width: 400px;
    border: solid 1px #808080;
    border-width: 1px 1px;
    left: 50%;
    position: relative;
    top: 50%;
}

/* removed mp_header, mp_body, mp_msg CSS for brevity */

This will happily make smack bang in the center of the page on top of other HTML.

However, if I set display:noneCSS in the class .mp_modalpopupand then use $ .blockUI to make it visible, in IE 8 the dialog centers itself vertically but aligns to the left and half of the dialog from the page and in Google Chrome and Firefox the dialog is not displayed at all (but blockUI works because the page is being loaded).

This is javascript blockUI:

$.blockUI.defaults.css = {};

$.blockUI({ 
    message: $('#progressDialogue'), 
    overlayCSS: { backgroundColor: '#000', opacity: 0.1 },
    css: {backgroundColor: '#00f', color: '#100'} 
});

Why is this happening?

Answer 1

, blockUI <div>. CSS, .

:

bottom: 50%;
right: 50%;
position: absolute;

left: 50%;
position: relative;
top: 50%;

blockUI :

$.blockUI({ 
    centerX: false, 
    centerY: false, 
    message: $('#progressDialogue'), 
    overlayCSS: { backgroundColor: '#000', opacity: 0.1 },
    css: {backgroundColor: '#00f', color: '#100'} 
});

Answer 2

.

, blockUI centerX centerY.

html, . div . , , , centerY false, CSS : "5%", . , cUI .

$('html').block({ message: $('#layOver'),
    centerX: true,
    centerY: false,
    css: {
            top: '5%',
            width: '720px',
            height: 'auto',
            cursor: 'null',
            border: 'none',
            textalign: 'center',
            backgroundColor: 'auto', 
    }, 
    overlayCSS:  { 
            opacity: 0.4 ,
            cursor: 'null',
    } 
});