Question

它必须简单，这是我的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中显示在页面顶部。

顺便提一句，"vertical-align:middle;" 也不起作用。

附言：在面板上设置“position:relative;”无效，在面板上设置“position:relative;”和在图像上设置“position:absolute;”会在FF中破坏它，在Safari中无效。

这有效：

.progressPanel
{
  height:100%;
  width:100%;
  position:relative;
}

.progressImage
{
  position:absolute;
  top:50%;
  left:50%;
}

Answer 1

将 .progressPanel 的位置设置为相对位置，将 .progressImage 的位置设置为绝对位置。以下代码在 Firefox、IE 和 Safari 上有效。设置负边距为图像宽度/高度的一半，以实现完美居中。请注意，进度面板的某个父元素（在此情况下是 body）需要有一个高度，以便进度面板能够填充它。

<!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>

Answer 2

确保父容器也设置为position: relative并指定高度，否则位置将无法正确工作。

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

或者，为什么不将面板的背景属性设置为您的 gif？

background: url( path/to/image.gif ) no-repeat center middle;

那将始终居中。

Answer 3

位置规范（相对或绝对）应该在父元素和子元素中都指定，否则子元素的定位可能无法生效。除非指定左侧：100px；顶部：100px等确切位置，否则应始终使用相对定位。垂直对齐只涉及元素本身，并且仅涉及文本行中的位置。行高不同于div高度，除非进行更改。行高必须指定为大于内部元素，以便使垂直对齐生效。

友情链接