它必须很简单，这是我的 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>
我根据用户操作切换面板显示。
在 FireFox 中运行良好，但在 Safari 中显示在页面顶部。
附注“垂直对齐:中间；”也不起作用。
p.p.s.设置“position:relative；”在面板上不起作用，设置“position:relative；”在面板上和“position:absolute；”在 FF 中将图像打断，在 Safari 中不执行任何操作
这行得通:
.progressPanel
{
height:100%;
width:100%;
position:relative;
}
.progressImage
{
position:absolute;
top:50%;
left:50%;
}
最佳答案
设置.progressPanel的位置为relative，.progressImage的位置为absolute。以下在 FF、IE、Safari 中对我有用。将负边距设置为图像宽度/高度的一半以实现完美居中。请注意，progressPanel 的某些父级(在本例中为 body)需要一个高度，以便 progressPanel 可以填充它。
<!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>
关于css - Safari 中的相对定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/291189/