4つの方法は、垂直方向にCSSを中心に

1.margin:auto 法：

HTML：

<div>
<img src="mm.jpg">
</div>

CSS：

div{
width:400px;
height:400px;
position:relative;
border:1px solid #465468;
}

img{
position:absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
}

上下が0に配置され、マージン：0を実現することができる文書ストリームから中央

負の法律を2.margin

.container{
width:500px;
height:500px;
border: 2px solid #379;
position:relative;
}

,inner{
width:480px;
height:480px;
background-color:#746;
position:absolute;
top:50%;
left:50%;
margin-top:-190px;
margin-left:-240px;
}

負の値に置き換えることができます

transform：translateX(-50%)
transform：translateY(-50%)

（文書フローから逸脱することなく）3.table細胞

4.フレックス