中央に配置する

margin(50vh auto)を使う方法

<div class="contents">
	水平垂直中央
</div>

.contents{
　margin: 50vh auto 0;
　transform: translateY(-50%);
　padding: 15px 30px;
　text-align: center;
　width: 300px;  
}

display(flex)を使う方法

<div class="wrapper">
  <div class="contents">水平垂直方向に中心に配置する</div>
</div>

.wrapper{
　display: flex;
　justify-content: center;
　align-items: center;
　height:100vh;
}

text-align(center),vertical-align(middle)を使う方法

<div class="wrapper">
　<img class="target"  src="file:abc.jpg">
</div>

.wrapper{
　line-height: 100vh;
　background-color: pink;
　text-align: center;
}
.wrapper .target{
　vertical-align: middle;
}

position(absolute)を使う方法

<div class="wrapper">
　<img class="target"  src="file:abc.jpg">
</div>

 .wrapper{
　position: relative;
　background: pink;
　height: 100vh;
}

.wrapper .target{
　position: absolute;
　margin: auto;
　top: 0;
　bottom: 0;
　left: 0;
　right: 0;
　display: block;
}

background-image(背景画像)を使う方法

<div class="container"></div>

.container{ 
　display:block;
　background-image: url(abc.png);
　background-position: center;
　background-repeat: no-repeat;
　background-size:cover;
}