It has to be simple, here's my CSS:
.progressImage
{
position:relative;
top:50%;
}
.progressPanel
{
height:100%;
width:100%;
text-align:center;
display:none;
}
<asp:Panel ID="pnlProgress" runat="server" CssClass="progressPanel">
<asp:Image ID="Image1" runat="server" CssClass="progressImage" ImageUrl="~/Images/Icons/loading.gif" />
</asp:Panel>
I toggle panel display depending on user action.
Works great in FireFox, but shows up at the top of the page in Safari.
p.s. "vertical-align:middle;" doesn't work either.
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
THIS WORKED:
.progressPanel
{
height:100%;
width:100%;
position:relative;
}
.progressImage
{
position:absolute;
top:50%;
left:50%;
}