CSS Safari 中的相对定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/291189/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Relative positioning in Safari
提问by roman m
It has to be simple, here's my CSS:
它必须很简单，这是我的 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.
在 FireFox 中运行良好，但在 Safari 中显示在页面顶部。
p.s. "vertical-align:middle;" doesn't work either.
ps“垂直对齐：中间；” 也不起作用。
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
pps 设置“位置：相对；” 在面板上不起作用，设置“位置：相对；” 在面板和“位置：绝对；” 在图像上在 FF 中破坏它，在 Safari 中什么也不做
THIS WORKED:
这有效：
.progressPanel
{
height:100%;
width:100%;
position:relative;
}
.progressImage
{
position:absolute;
top:50%;
left:50%;
}
回答by Chris Marasti-Georg
Set the position of .progressPanelto relative, and the position of .progressImageto 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.
将位置设置.progressPanel为相对，将位置设置.progressImage为绝对。以下在 FF、IE、Safari 中对我有用。将负边距设置为图像宽度/高度的一半，以实现完美居中。请注意，progressPanel 的某些父级（在本例中为主体）需要一个高度，以便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>
回答by Mauro
Ensure the parents container is also set to position: relative and has a height specified, without it the position wont work correctly.
确保父容器也设置为 position:relative 并指定了高度，没有它，位置将无法正常工作。
.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?
或者，为什么不将面板的背景属性设置为您的 gif？
background: url('path/to/image.gif') no-repeat center middle;
That will always be centered.
那将永远是中心的。
回答by micaro
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.
位置规范（相对或绝对）应该在两个元素（父元素和子元素）中，否则子元素的定位不一定有效。你应该总是对元素使用相对定位，除非你指定了像 left: 100px; 这样的确切位置；顶部：100 像素。Vertical-align 是指元素本身，只涉及文本行中的位置。Line-height 与 div 高度不同，除非你改变它。line-height 必须指定为大于里面的元素才能使vertical-align 生效。
