简短的回答: 不。 (现在可以使用CSS转换。请参见下面的编辑)
长答案:使用“固定”定位的问题是它会使元素 脱离流动
。因此无法相对于其父对象重新定位,因为好像它没有父对象。但是,如果容器的宽度是已知的固定宽度,则可以使用以下方法:
#fixedContainer { position: fixed; width: 600px; height: 200px; left: 50%; top: 0%; margin-left: -300px; }编辑(03/2015):
这是过时的信息。现在,借助CSS3转换的魔力,可以将动态大小的内容(水平和垂直)居中。遵循相同的原则,但是可以使用代替使用边距来偏移容器
translateX(-50%)。这不适用于上面的边距技巧,因为除非宽度固定,否则您不知道要偏移多少,并且您不能使用相对值(如
50%),因为它将相对于父元素而不是相对于它的元素应用于。
transform表现不同。其值相对于它们所应用的元素。因此,
50%for
transform表示元素宽度的一半,而
50%for
margin表示父元素宽度的一半。
使用与以上示例类似的代码,我使用完全动态的宽度和高度重新创建了相同的场景:
.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%);}


