Question

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

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

vertical-align：中间当然不起作用。

http://jsfiddle.net/wKQYj/

Answer 1

要在父元素中垂直对齐文本，并记住img是内联元素，因此对文本执行类似，您只需设置{{ 1}}到父元素的line-height：

height

JS Fiddle demo

Answer 2

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

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

但是有一个明显的例外 - 表格单元格（即<td>和<th>元素）使用vertical-align样式来完成这样的操作：对齐单元格的内容在细胞内。

这个例外是一种怪癖 - 它确实不应该存在。 CSS设计者将其放在那里，以便允许CSS重现表格元素的valign属性，这是设计师在基于表格的布局的黑暗时代常用的。

对于其他元素，在它的中间垂直对齐框的内容可能有点艺术。有几种技巧：

对于单行文本，只需使line-height与整个框的高度相同即可。你可能甚至不需要vertical-align。
使用display:table-cell;使元素模拟表格单元格，然后使用vertical-align。这有效，但可能会产生意想不到的后果（表格单元的其他属性可能不想模拟）。
如果您知道要垂直对齐的元素的高度，可以将其定位为50％减去其高度的一半，如下所示：
```
position:absolute;
top:50%;
height:200px;
margin-top:-100px; /* half the height */
```

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

希望有所帮助。

Answer 3

对于不使用表格的更现代（IE8 +）解决方案，我最喜欢this one。

<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

vertical-align属性仅对td元素有效。尝试类似：

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

或者因为您知道img的高度和宽度：

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

Answer 5

漂亮cool and modern approach（指定高度）：

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

Answer 6

我使用display：box属性：

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

#text {
    vertical-align: middle;
}

请在此处查看js-fiddle：verical align js-fiddle

Answer 7

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

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

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

}）;

Answer 9

我正在使用flex将元素居中。有效提高页面的响应速度。

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

请查看here，以了解如何垂直居中。

CSS垂直对齐

9 个答案: