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%;
}
Set the position of .progressPanel to relative, and the position of .progressImage to absolute. The following works for me in FF, IE, Safari. Set the negative margins to half the width/height of your image for perfect centering. Note that some parent of the progressPanel (body in this case) needs a height so that the progressPanel can fill it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
body {
height:700px;
}
.progressImage {
position:absolute;
top:50%;
left:50%;
margin-left:-16px;
margin-top:-16px;
}
.progressPanel {
position:relative;
height:100%;
width:100%;
text-align:center;
background:red;
}
</style>
</head>
<body>
<div class="progressPanel"><img class="progressImage" src="pic.jpg"/></div>
</body>
</html>
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.
Position specification (relative or absolute) should be in both elements (parent and child) otherwise the positioning of child element doesn't necessarily work. You should always use relative positioning for an element unless you specify the exact position like left: 100px; top: 100px. Vertical-align refers to the element itself and concerns only the position in text line. Line-height is not the same as div height unless you change it. Line-height must be specified larger than elements inside in order to get vertical-align take effect.
