如何垂直放置绝对定位的物品？

我想对齐绝对定位的div。顶部：50％，底部：50％不工作，这有什么解决方案？如何垂直放置绝对定位的物品？

CSS

#container { 
    position:relative; 
    background:red; 
    width:600px; 
    height:600px; 
} 

#cen { 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:grey; 
    top:50%; 
    bottom:50%; 
}

HTML

<div id="container"> 
    <div id="cen"></div> 
</div>

http://jsfiddle.net/2xq5F/

来源

2013-04-24 user1452062

'top：50％'将元素的顶部边缘设置为从其第一个非静态位置父元素的顶部减少50％。 – 2013-04-24 20:21:35

如果这些是真正的测量，为什么不这样做呢？

#cen { 
    position: absolute; 
    width: 300px; 
    height: 300px; 
    top: 150px; 
    background:grey; 
}

来源

2013-04-24 20:18:45 Finbarr

即时任何环境变量更改或内容动态更改流，这将中断。 '顶部：50％'和负边界比硬编码值更有效。 – 2013-04-24 20:23:47

除了您的负余量也是硬编码的事实，所以最终您会为相同的结果编写更多代码。似乎对我来说是一种反模式。 – Finbarr 2013-04-24 20:24:43

我不知道为什么有这个答案downvote。我以50％的优势和50％的负面盈利为前提，但这仍然是一种适用于这种特殊情况的解决方案。 – 2013-04-24 20:30:43

垂直居中的东西，你需要做的添加top: 50%和负margin-top: -(elementHeight/2)。

你的情况，这将是

#cen { 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:grey; 
    top:50%; 
    margin-top: -150px; 
}

来源

2013-04-24 20:20:23

如果我不知道'＃cen'的高度，它是如何工作的？ – user1452062 2013-04-24 20:24:20

这种特殊的方法*在这种情况下不会工作 – Adrift 2013-04-24 20:25:04

你也可以这样来做：

#cen { 
    position:absolute; 
    width:150px; 
    height:150px; 
    background:grey; 
    top:0; 
    bottom:0; 
    left: 0; 
    right: 0; 
    margin: auto; 
}

演示在：http://jsfiddle.net/audetwebdesign/EBmy3/

大的优势，无需数学。

但是，这是有效的，因为您指定了宽度和高度。当你使用百分比时，这会变得更加棘手。

注意：我制作了一半尺寸的块，以便它们可以放在小提琴窗口中......也可以与较大的块一起使用。

作品很好地替换元素

这种技术做了很好的工作，如果你定位的图像，其中有具体的尺寸（虽然你可能不知道它们）。

请参阅小提琴中的示例。

来源

2013-04-24 20:28:24

这与旧版浏览器的兼容性如何？ – 2013-04-24 20:43:43

这实际上不在CSS 2.1规范中，所以它可以在IE6之前工作，但我没有尝试过。 – 2013-04-24 20:50:57

垂直对齐基于其他内联元素。我发现垂直对齐的最佳方式是添加一个伪类。

如果知道尺寸，就可以很容易地垂直对齐某些东西，就像其他一些答案所指出的那样。但是，如果你没有特定的尺寸，并且需要更加自由，它会变得更加困难。

基本上，该方法将psuedo类与其余内容对齐，以对齐容器内的任何内容。

div#container { 
    width: 600px; 
    height: 600px; 
    text-align:center; 
} 
div#container:before { 
    content:''; 
    height:100%; 
    display:inline-block; 
    vertical-align:middle; 
} 
div#cen { 
    display:inline-block; 
    vertical-align:middle; 
}

来源

2013-04-24 20:32:15 nick

我有点像这个，其实挺聪明的。这并不完美，但它做得很好。请看下面的小提琴http://jsfiddle.net/audetwebdesign/8Gbkh/，你可以看到小孩div不在中心。我认为生成的内容占用了一些空间。然而，当许多人失败并且很高兴知道时，这个窍门将会起作用。 – 2013-04-24 20:48:52

text-align：以容器为中心 – nick 2013-04-24 20:58:57

我不知道你需要什么是绝对定位的，但是如果你欺骗CSS以为你的容器是一个表单元格，则可以使用vertical-align属性的完全动态的布局。

#container { 
    position:relative; 
    background:red; 
    width:100px; 
    height:200px; 
    display: table-cell; 
    vertical-align: middle; 
} 

#cen { 
    width:100px; 
    height:20px; 
    background:grey; 
}

来源

2013-04-24 21:16:14 sicks

这是正确的方法... – Xarcell 2013-04-25 05:20:59

如何垂直放置绝对定位的物品？

回答

相关问题