垂直居中一个元素

.div里的内容会垂直居中

css部分：

.div {
          -webkit-align-items: center;  
          -ms-flex-align: center;  
          align-items: center;
          display: -webkit-flex;
          display: flex;
        }

html部分：

<div style="width:200px; height:200px; border:1px solid red;" class="div">
            <a href="#">怎么就居中了呢</a>
            <p style="width:100px; height:100px; border:1px solid blue;">好奇怪</p>
</div>

效果：