CSS垂直对齐

Question

我有一个img浮动div,我不知道如何垂直居中.

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

vertical-align:中间当然不起作用.

http://jsfiddle.net/wKQYj/

Answer 1

要在父元素中垂直对齐文本,并谨记的img是一个内联元素等行为类似文本,你可以简单地设置line-height到height父元素:

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

JS小提琴演示.

Answer 2

在vertical-alignCSS样式指定文本的它的文本行内对齐.例如,这允许您将文本指定为上标或下标.

因此,它实际上并不是要在框内垂直对齐元素.

有一个明确的例外,但是-表格单元格(即<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 */
   

还有其他几个,但这些应该让你开始.

希望有所帮助.

Answer 3

对于不使用表格的更现代（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>

Answer 4

使用translate属性，它很简单，甚至在IE中也可以工作：

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