imgタグを親divの真ん中垂直にさせるcss方法
html
before
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
</style>
</head>
<div style="border: 1px solid black;width:500px;height:300px">
<img width="120px" src="benz.jpeg">
</div>
</html>
after
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
.centerLand {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<div class="centerLand" style="border: 1px solid black;width:500px;height:300px">
<img width="120px" src="benz.jpeg">
</div>
</html>
display: flex;
justify-content: center;
align-items: center;
上記のcssをimgタグの親divに適応すれば、imgが垂直の真ん中に配置されます。
vertical-alignの使い方
親
height:指定した値(200px)もしくは指定した割合(100%)
display: table;
子
display: table-cell;
vertical-align: middle;