Question

我想对齐一个绝对定位的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/

Answer 1

要垂直居中，您需要添加top: 50%和否定margin-top: -(elementHeight/2)。

在你的情况下，它将是

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

Answer 2

你也可以这样做：

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

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

大优势，无需数学。

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

注意：我制作了一半大小的块，以便它们适合小提琴窗口...也适用于较大的块。

适用于替换元素

如果您要定位具有特定尺寸的图像（尽管您可能不了解它们），此技术可以很好地完成。

参见小提琴中的例子。

Answer 3

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

如果您知道尺寸，则可以轻松地垂直对齐某些内容，就像其他一些答案所指出的那样。但是，如果你没有特定的尺寸并且需要更加自由，那就更难了。

基本上，该方法将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;
}

Answer 4

我不确定你需要它的绝对定位，但是如果你让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;
}

Answer 5

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

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

如何垂直居中绝对定位项目？

5 个答案: