<div>の中の文字列を上下で中央に揃える


htmlでdivの中の文字列を上下で中央にそろえるにはどうすればいいのでしょうか?  
divの中に文字列があり、`text-align: center`で左右は中央になったのですが上下で中央に揃えられません。

[code]

    div#div1 {
      text-align: center;
      height: 400px;
      width: 600px;
      border: solid 1px;
      vertical-align: middle;
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="ja">
    
    <head>
      <meta charset="utf-8">
      <title>Test html</title>
    </head>
    
    <body>
      <div id="div1">Hello</div>
    </body>
    
    </html>
[/code]




styleに`display: table-cell;`を追加します。  
(※css3)




styleに`display: table-cell;`を追加します。  
(※css3)

