ボックスモデル内の文字を「中心」、「ど真ん中」に置きたい

Question

【HTMLのbody内】

<div class="test">
  真ん中
</div>

【CSS】

.test{
  background-color: yellow;
  width: 200px;
  height: 200px;
  border:5px solid blue;
  box-sizing: border-box;
}

この場合、 box-sizing: border-box; も入れてるし、
ボーダー部分合わせて200px、200pxだから、

 padding: 100px;

これを入力すれば、単純に上下左右100pxだから中心に『真ん中』というテキストが来るかと思いきや、できませんでした。
この場合、最も間簡単にやるにはどうすれば良いでしょうか？

【追記】
以下二つを追加してみました。

　line-height: 200px;
  text-align: center;

見てわかる通り、若干中心とはズレているのがわかるかと思います。

Answer 1

ボックス要素（今回のサンプルですとDIV）ひとつだけでテキストを中央に寄せるのでしたら
横方向は text-align: center;、縦方向は line-height: 要素の高さ;はどうでしょうか。

.test{
  background-color: yellow;
  width: 200px;
  height: 200px;
  border:5px solid blue;
  line-height: 200px;
  text-align: center;
/*
  box-sizing: border-box;
  padding: 100px;
*/
}

補足
1行テキストの場合のみ有効です。

Comments

[退会済みユーザー]

一応試してみたのですが、追記を見ていただければわかりますが、
若干ずれていますよね。
もっと正確に中心にする方法はありますか？

[noka_blank]

box-sizingを削除するか、borderの幅分line-heightの値を引き算してみてください。

box-sizingはデフォルトではcontent-boxなので、border-boxを指定する場合は計算が必要です。

Sohayaさんの回答では、ちゃんとコメントアウトされていると思います。

[退会済みユーザー]

box-sizing　削除し忘れていました。
解決しました。
ありがとうございます。

Answer 2

解決済みですが。
flexも割と簡単かと思います。

.test{
  display: flex;
  align-items: center;
  justify-content: center;
}