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

div#div1 {
  text-align: center;
  height: 400px;
  width: 600px;
  border: solid 1px;
  vertical-align: middle;
}
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Test html</title>
</head>

<body>
  <div id="div1">Hello</div>
</body>

</html>