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

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

要垂直居中，您需要添加 atop: 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

Vertical alignment is based off of other inline elements. The best way I've found to vertically align something is to add a psuedo class.

It's easy to vertically align something if you know the dimensions, like some of the other answers have noted. It makes it harder though, when you don't have specific dimensions and needs to be more free.

Basically, the method aligns the psuedo class with the rest of the content to align middle whatever is inside the container.

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;
}