垂直定位div

Question

我有这样的事情：

立即解决方案：
固定高度和负顶值。

现在我想将红色框垂直放置在父div中，但它必须是灵活的，因为有些选项可能会扩展红色框，增加一个或两个文本行。

尺寸为840x300px，现在的代码为：

HTML：

<div class="large-16 columns item">
<div class="box">
  <div class="image"><img src="system/html/band_test1-f5641934.jpg"></div>
  <div class="data red">
    <h1><a href="www.google.de" title="headliner" target="_blank">SEHR LANGER BANDNAME AHOI</a></h1>
    <h2><a href="" title="venue" target="_blank"></a></h2>
    <p class="date">So, 28.07.2013</p>
    <p class="supportbands">+ <a href="" title="Test Support" target="_blank">Test Support</a>  </p>
  </div>
</div>
</div>  

CSS：

.showsblock .item {
    height: 300px;
    margin-bottom: 20px;
}

.box .image img {
    border: 1px solid #a2a2a2;
}
.box .data {
    background: url('../show_bg_black.png') repeat;
    display: inline-block;

    position: relative;
    top: -165px;
    left: 1px;

    padding-right: 10px;
    min-width: 290px;

}

这不是很灵活。当我在红色div中再添加一行时，它会扩展但不再居中。你有什么想法吗？
此外，我认为对于“图像”div可能有更好的解决方案。

谢谢。

Answer 1

我建议position: absolute

DEMO http://jsfiddle.net/kevinPHPkevin/kKWUH/2/

div.data {
    position:absolute;
    top:0;
    bottom:0;
    margin: auto;
    background: rgba(0, 0, 0, 0.5);
    height:150px;
}

这会将div垂直对齐。您可以在顶部填充以稍微降低等等。

Answer 2

我建议使用CSS表格（例如display:table-cell）和vertical-align:middle。

<强> See this demo

---

修改

---

将图片放在absolute位置，将文字容器放在relative位置。与CSS表垂直对齐的原理相同。

<强> Updated demo