CSS垂直对齐

Question

我在一个浮动的DIV中放了一张图片，但我不知道如何将其垂直居中。

<div style="height: 300px">
   <img style="height: 50px" src="something" />
</div>

垂直居中：middle 当然不起作用。

http://jsfiddle.net/wKQYj/

- anonymous

---

这篇文章提到的两种方法已经作为单独的答案给出，但是如果你知道vertical-align实际用于什么，那么你将成为一个更好的CSSer: http://phrogz.net/css/vertical-align/ - scragz

@scragz - 那是一个好链接。虽然，我不会使用 display:table-cell。当然，我也不会使用我提出的 <table> 的答案。哈。 - Jason

https://pbs.twimg.com/media/B2mW8NiCQAA6IIP.jpg - walv

这回答解决了你的问题吗？如何在div中垂直对齐文本？ - user13117614

Answer 1

为了在父元素内垂直对齐文本，需要注意img是一个内联元素，所以与文本类似。您可以将line-height设置为父元素的height来实现：

div {
    height: 300px;
    line-height: 300px;
}

JS Fiddle演示。

- David Thomas

Answer 2

vertical-align CSS样式指定了文本在其文本行内的对齐方式。这允许您将文本指定为上标或下标，例如。

因此，实际上它并不是用于在盒子内竖直对齐元素。

然而，有一个明确的例外 - 表格单元格（即<td>和<th>元素）使用vertical-align样式正是为了将单元格内容对齐到单元格内部。

这个例外有点奇怪 - 它实际上不应该存在。CSS设计师在其中加入了这个例外，以便CSS可以重现表格布局的黑暗时代中设计师普遍使用的表格元素的valign属性。

对于其他元素，在垂直方向上将盒子的内容对齐到中间可能需要一些技巧。有几种技术：

1. 对于单行文本，只需使line-height与整个盒子的高度相同即可。您可能甚至不需要使用vertical-align。

2. 使用display:table-cell;使元素模拟表格单元格，然后使用vertical-align。这可以工作，但可能会产生意想不到的后果（您可能不想模拟表格单元格的其他属性）。

3. 如果您知道要垂直对齐的元素的高度，可以将其定位为50%减去其高度的一半，如下所示：

position:absolute;
top:50%;
height:200px;
margin-top:-100px; /* half the height */

还有其他一些，但是这些应该可以让你开始了。

希望能有所帮助。

- Spudley

Answer 3

使用translate属性，它简单易用并且即使在IE中也有效：

img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

- rainy

Answer 4

对于一个使用现代浏览器（IE8及以上）的解决方案，不使用表格，我比较喜欢这个。

<style>
/* Can be any width and height */
.block {
  height:500px;
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can be any width or height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
</style>

<div class="block"><div class="centered">Centered Content</div></div>

- Justin

---

确实是最佳解决方案，因为它不需要知道内容的高度，也不使用表格单元格CSS。感谢分享！ - Sygmoral

有没有办法做到这一点，同时让.centered成为百分比宽度（可能实际上是100%）？ - Kevin Wheeler

Answer 5

vertical-align属性在 td 元素上才有真正的效果。可以尝试以下方式：

<table>
 <tr>
  <td style='height:300px; vertical-align:center'>
   <img src='something'>
  </td>
 </tr>
</table>

如果您知道的高度和宽度：

<div style='height:300px;'>
 <img style='height:50px; position:relative; top:50%; margin-top:-25px'>
</div>

- Jason

---

天哪，以上这些都不行啊，我的意思是CSS有严重的漏洞，他们正在开发阴影等功能，而我们仍然必须使用表格或在div中嵌套div来实现垂直居中...我必须使用div。而且我不能使用第二个代码，因为div高度将被用户更改。所以我很迷茫。 - anonymous

@匿名：你能使用JavaScript或任何JS库（MooTools，Scriptaculous，jQuery，Glow...）吗？ - David Thomas

Answer 6

相当酷和现代的方法（指定了高度）：

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

- Agat

Answer 7

我正在使用display:box属性：

#container {
    display: box;
    box-orient: vertical;
    box-pack: center;  
}

#text {
    vertical-align: middle;
}

请查看此js-fiddle示例：verical align js-fiddle

- Ruwen

Answer 8

对于任何情况，JavaScript 可能是最好的选择，以使图像在垂直中心居中。如果您可以使用像 jQuery 这样的库，那么只需要几行代码。

$(function(){
    var containerHeight = $('#container').outerHeight();
    var imgHeight = $('#logo img').outerHeight();

    var difference = (containerHeight - imgHeight)/2;
    $('#logo img').css({'position' : 'relative', 'top' : difference + 'px'});

});

- heymrcarter

---

那他需要包含完整的jQuery库，再加上这个脚本吗？仅仅为了居中一些东西似乎有点过头了。 - Jason

如果他需要居中某些内容超过几次，并且他不知道 A）父级 div 的高度是多少，以及 B）图像的高度是多少，那么这种方法每次都可以奏效，在任何情况下。 - heymrcarter

Answer 9

我正在使用flex来居中一个元素。它可以有效地使页面更具响应性。

div {
    display: flex;
    align-items: center;
}

请查看此处以了解如何垂直居中。

- Webguru