Pourquoi mon div ne se centre-t-il pas correctement?

Question

J'utilise $ .blockUI avec jQuery pour afficher un dialogue modal. Le code HTML ressemble à:

<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> 

Le CSS ressemble:

.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 */ 

Cela rendra heureux bang en plein centre de la page sur d'autres HTML. Toutefois, si je mets display:none dans la classe CSS .mp_modalpopup et que j'utilise $ .blockUI pour le rendre visible, dans IE 8 le dialogue se centre verticalement mais aligne gauche avec la moitié du dialogue de la page et dans Google Chrome et Firefox le dialogue n'est pas visible du tout (mais blockUI fonctionne parce que la page grise).

Ceci est le javascript BlockUI:

$.blockUI.defaults.css = {}; 

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

Pourquoi est-ce qui se passe?

Answer 1

Cela se produit car blockUI essaie également de centrer votre <div>. Si vous supprimez tout positionnement de votre CSS, cela devrait fonctionner.

Supprimer ceci:

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

Et ce

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

Sinon, vous pouvez désactiver le blockUI de centrage comme ceci:

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

Answer 2

En fait, je viens de trouver une solution très facile.

Si vous bloquez un élément au lieu de la page entière, blockUI vous donne les options pour utiliser centerX et centerY. J'ai bloqué l'élément HTML et c'était tout. Ma div était centrée horizontalement et verticalement. Bien sûr, je ne l'ai pas voulu centré verticalement, donc j'ai mis centerY à false, et dans le CSS, je l'ai placé en haut: '5%', comme ci-dessous. Assurez-vous également de définir la largeur de l'élément dans le blockUI css.

$('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', 
    } 
});