<p>It has to be simple, here's my CSS: </p>

<pre><code>.progressImage 
{
  position:relative;
  top:50%;
}

.progressPanel
{
height:100%;
width:100%;
text-align:center;
display:none;
}

&lt;asp:Panel ID="pnlProgress" runat="server" CssClass="progressPanel"&gt;
&lt;asp:Image ID="Image1" runat="server" CssClass="progressImage" ImageUrl="~/Images/Icons/loading.gif" /&gt;
&lt;/asp:Panel&gt;
</code></pre>

<p>I toggle panel display depending on user action.</p>

<p>Works great in FireFox, but shows up at the top of the page in Safari.</p>

<p>p.s. "vertical-align:middle;" doesn't work either.  </p>

<p>p.p.s. setting "position:relative;" on the panel doesn't work, setting "position:relative;" on the panel and "position:absolute;" on the image breaks it in FF and does nothing in Safari</p>

<p>THIS WORKED:</p>

<pre><code>.progressPanel
{
  height:100%;
  width:100%;
  position:relative;
}

.progressImage
{
  position:absolute;
  top:50%;
  left:50%;
}
</code></pre>

Ensure the parents container is also set to position: relative and has a height specified, without it the position wont work correctly.
```
```
.progressPanel
{
    height:100%;
    width:100%;
    text-align:center;
    display:none;
    position: relative;
}
```
```
alternatively, why not set the background property of the panel to your gif?
```
```
background: url('path/to/image.gif') no-repeat center middle;
```
```
That will always be centered.