与屏幕大小或分辨率无关，将加载指示器div定位在位置

Question

in my aspx page, i have 3 td inside a table where i have placed divs to display my content.i'm using ajax to load the data inside each of the div.in the same td in which i am displaying my content div i have also placed a div to show loading indicator when the data div loads. My problem is positioning the loading indicator div when its seen through different machines with different resolution or screen size. At present my loading indicator div are of type absolute. Can any one suggest an elegant method of position my loading indicator div in the three td's so dat its correctly centered no matter whatever is the screen size or resolution. i'm using c# web application.

Below is the markup of one of the td's,

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="Box">
                    <tr>
                        <td class="Box_TopLeftCurve">
                            &nbsp;
                        </td>
                        <td valign="top" class="Box_TopRep">
                        </td>
                        <td class="Box_TopRightCurve">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="Box_LeftRep">
                            &nbsp;
                        </td>
                        <td align="left" valign="top">
                            <div class="Box_GridArea">
                               Data Here
                            </div>
                            <div style="position: absolute; top: 347px; left: 207px; width: 134px;display:none;">
                                Loading Indicator
                            </div>
                        </td>
                        <td class="Box_RightRep">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="Box_BaseLeftCurve">
                            &nbsp;
                        </td>
                        <td class="Box_BaseRep">
                            &nbsp;
                        </td>
                        <td class="Box_BaseRightCurve">
                            &nbsp;
                        </td>
                    </tr>

Answer 1

Display the indicator as a background image so that it is easy to center on any resolution.

.loader { background: url('/images/loader.gif') center center no-repeat; }

You could assign the background image to the table or the td in which it should appear.

When loaded you could remove the loader class using jQuery for example:

if (is_loaded) {
  $('table td').removeClass('loader')
}