vertical-align:centerで、中央にこない

Question

 <footer>
        <p>Muchkin</p>
    </footer>

footer {
background-color:#B9B9B9;
height:40px;
margin-top:-15px;
}

footer p {
    color:white;
    text-align:center;
    vertical-align:center;
}```

vertical-align:center;を指定したのに、Muchkinという文字が、footerの中で、上に来ています。
これを中央に寄せたいのですが、どうすれば、よろしいでしょうか。

Answer 1

まず、vertical-align: center;ではなくvertical-align: middle;ですね。
ただ、vertical-alignはテーブルセルなどで有効など制限が多いので、display: flex;を使った方がシンプルかつ確実です。

footer {  
  background-color:#B9B9B9;  
  height:40px;  
  margin-top:-15px;
  display: flex;
  justify-content: center;
  align-items: center;
}