简短的回答:不。(现在可以使用CSS转换。请参见下面的编辑)
长答案:使用“固定”定位的问题是它使元素脱离流动。因此无法相对于其父对象重新定位,因为好像它没有父对象。但是,如果容器的宽度是已知的固定宽度,则可以使用以下方法:
#fixedContainer {
position: fixed;
width: 600px;
height: 200px;
left: 50%;
top: 0%;
margin-left: -300px; /*half the width*/
}
http://jsfiddle.net/HFjU6/1/
编辑(03/2015):
这是过时的信息。现在,借助CSS3转换的魔力,可以将动态大小的内容(水平和垂直)居中。遵循相同的原则,但是可以使用代替使用边距来偏移容器translateX(-50%)
。这不适用于上面的边距技巧,因为除非宽度固定,否则您不知道要偏移多少,并且您不能使用相对值(如50%
),因为它将相对于父元素而不是相对于它的元素应用于。 transform
表现不同。其值相对于它们所应用的元素。因此,50%
for transform
表示元素宽度的一半,而50%
for margin表示父元素宽度的一半。这是个 IE9 +解决方案
使用与以上示例类似的代码,我使用完全动态的宽度和高度重新创建了相同的场景:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
如果希望它居中,也可以这样做:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
演示:
jsFiddle:仅水平居中jsFiddle:仅
水平居中
原始功劳归用户aaronk6指出,在此答案中