How to display UpdateProgress at the center of a grid view with CSS?

Question

Need to display Update Progress at the center of a Grid view placed in a Ajax Update Panel. Is there a way to place the Update progreass control at the center of the grid view (or else center of the page) with CSS (without using jQuery or Java Script)?

Answer 1

Put the grid-view and update progress html within a wrapper div. Position div relatively and position the update progress absolutely at center.

See this jsfiddle that I have set up: http://jsfiddle.net/DDdyU/

key styles are

.wrapper
{
    position: relative;
}
.updateProgress
{
    position:absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-right: -20px;
}

negative margins are half size of update-progress.