css怎么将一张图片在另一个元素中垂直居中

html代码

<div> <img src="./img/2.jpg" alt=""> </div>

css代码

div{ width: 500px; height: 500px; line-height: 500px; border: 1px solid #000000; text-align: center; } img{ width: 300px; height: 300px; vertical-align: middle; }