CSSで複数行テキストを垂直方向に中央寄せする方法

例えば、ブログ記事一覧をリストで表示するとタイトル文章の長さがまちまちになっているので、二行にわたるタイトルもあれば、一行ですむタイトルもあって綺麗にそろっていない場合。

記事タイトル記事タイトル記事タイトル
記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル
記事タイトル記事タイトル
記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル

こんな感じのやつ。
上辺で揃えればまあ無難に見えるんですが、これをテーブルタグで囲っていたときのように垂直方向での中央寄せになればもっと凄然とした感じになるのになと思ったことありませんか？
実は、CSS3で割り切ってしまえば

display: table-cell;
vertical-align: middle;
height: 80px; /* 任意の値 */

の指定だけで非常に簡単にできます。

1. HTML部分

リストで並べている場合、中央寄せにしたい要素をdivタグで囲みます。

<ul class="tablecell">
 <li><div>記事タイトル記事タイトル記事タイトル</div></li>
 <li><div>記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル</div></li>
 <li><div>記事タイトル記事タイトル</div></li>
 <li><div>記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル</div></li>
</ul>

2.CSS部分

中央寄せにするdivタグの部分に、display: table-cell;vertical-align: middle; height:80px;を指定します。

<style type="text/css">
ul.tablecell {
 margin: 0 auto;
 padding: 0;
 width: 300px;
 list-style: none;
 border-top: solid 1px #aaa;
}
 ul.tablecell li {
   border-bottom: solid 1px #aaa;
 }
 ul.tablecell li div {
   padding: 5px 10px;
   height: 80px;
   display: table-cell;
   vertical-align: middle;
   font-size: 11px;
 }
</style>