Как показать окно сообщения в центре экрана?

Question

У меня есть решение asp.net, которое использует ajax. Одна из функций, использующих панель прогресса обновления, заключается в том, что содержимое отображается только тогда, когда в фоновом режиме выполняется запрос ajax.

Так что я хочу в основном показать черный прозрачный фон, который останавливает пользователя от чего-либо, а также отображает окно в центре экрана, которое говорит, пожалуйста, подождите, и у вас есть загрузка gif.

Я был в состоянии получить черный фон с помощью этого:

    <asp:UpdateProgress ID="AjaxAnimation" runat="server"> 
         <ProgressTemplate> 
          <center> 
           <%-- <asp:Image ID="loadingImage" runat="server" src="/_layouts/images/PDFLibrary/ajax-loader.gif"/> --%> 
           <div class="dim"></div> 
          </center> 
         </ProgressTemplate> 
        </asp:UpdateProgress> 

Css

.dim 
{ 
    height:100%; 
    width:100%; 
    position:fixed; 
    left:0; 
    top:0; 
    z-index:100 !important; 
    background-color:black; 
    filter: alpha(opacity=75); /* internet explorer */ 
    -khtml-opacity: 0.75;  /* khtml, old safari */ 
    -moz-opacity: 0.75;  /* mozilla, netscape */ 
    opacity: 0.75;   /* fx, safari, opera */ 
} 

Но как я могу иметь окно в центре экрана?

Answer 1

Что-то в следующем ?:

<div class="dim" runat="server"> 
    <span class="msg">Please wait...</span> 
</div> 

.dim 
{ 
    height:100%; 
    width:100%; 
    position:fixed; 
    left:0; 
    top:0; 
    z-index:100 !important; 
    background-color:black; 
    filter: alpha(opacity=75); /* internet explorer */ 
    -khtml-opacity: 0.75;  /* khtml, old safari */ 
    -moz-opacity: 0.75;  /* mozilla, netscape */ 
    opacity: 0.75;   /* fx, safari, opera */ 
} 

.dim .msg { 
    display:inline-block; 
    position: absolute; 
    width: 200px 
    height: 100px; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 

Answer 2

Вы должны использовать позицию: абсолютная и отрицательная маржа.

position: absolute; 
top:50%; 
left:50%; 
margin-top:-100px; 
margin-left:-100px; 
width:200px; 
height:200px; 

Пожалуйста, посмотрите мой код here