垂直对齐<div>内容

Question

最简单的事情......为什么下面的文字不是垂直居中的？这不是vertical-align: middle的作用吗？

    <div style="width:100%;height: 300px;background-color: #0047b3;vertical-align: middle;">
      Why are you not centered vertically?!?!?!
    </div>

Answer 1

如果你阅读了一些flex属性，可以更容易地看到下面的内容 “

div {
  width: 100%;
  height: 300px;
  background-color: #0047b3;
  display: flex;
   align-items: center;
}

<div>whatever you want to align vertically centre </div>