将未知高度的文本垂直居中于未知高度的 div 中

我知道这是一个常见问题，而且我已经问过类似的问题。 但这次我找不到解决方案。 我正在尝试将文本垂直居中，该文本在可以具有不同高度的 DIV 中可以具有不同的高度。 我试图仅使用 CSS 来解决这个问题，而不涉及 HTML。

例子 ：http://jsfiddle.net/F8TtE/ http://jsfiddle.net/F8TtE/

 <div id="test">
    <div id="sumup">

        <h1 class="titre">Title</h1>
        <div id="date">hello guys</div>
    </div>
 </div>

我的目标是让文本垂直和水平居中，无论其大小。

这里是 ：

#test {
    text-align:center;
}
#test::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#sumup {
    display: inline-block;
    vertical-align: middle;
}

#test {
    height : 180px;
    text-align:center;
    background: yellow;
}

#sumup {
   	background-color: #123456;
}

#test:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  #sumup {
    display: inline-block;
    vertical-align: middle;
  }

<div id="test">
		<div id="sumup">
			
			<h1 class="titre">Title</h1>
			<div id="date">hello guys</div>
		</div>
</div>

EDIT:现在已经是 2015 年了，值得庆幸的是网络发生了变化。假设你不支持过时的浏览器 http://caniuse.com/#search=flex，将元素垂直居中通常更简单、更清晰弹性模型 https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

#test {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#test {
    height : 180px;
    background: yellow;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#sumup {
   	background-color: #123456;
}

<div id="test">
		<div id="sumup">
			<h1 class="titre">Title</h1>
			<div id="date">hello guys</div>
		</div>
</div>