div_center.css

<style>
.title{ width:100%; float:left; color:#fbfbfb; font-size:16px; margin-left:25px; font-family:"Arial Black", Gadget, sans-serif}
/*-----Both Horizontally and Vertically--------*/
.wrpr{background-color: #999999; position:relative; height:500px; width:500px; float:left;}
.centre{ width:200px; height:200px; background-color:#C30; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}
/*-----Both Horizontally and Vertically--------*/


/*-----one element in horizontaly centre --------*/
.wrpr2{background-color: #999900;  height:500px; width:500px; margin:0; float:left; }
.centre2{ width:100px; height:100px; background-color:#CCC; margin:auto; margin-top:25px;}
/*----one element in horizontaly centre--------*/




/*-----More than one element in horizontaly centre--------*/
.wrpr3{background-color: #990066;  height:500px; width:500px; text-align:center; float:left; }
.centre3{ width:100px; height:100px; background-color:#CCC; display:inline-block; margin:20px 5px;}
/*----More than one element in horizontaly centre--------*/

/*----More than one element Vertically and horizontaly centre--------*/
.wrpr_main{ background-color: #FF6699;  height:500px; width:500px;display: flex; float:left;
  justify-content: center;
  align-items: center;}
.centre_main{ width:100px; height:100px; background-color:#CCC; margin-right:10px; }
/*----More than one element Vertically and horizontaly centre--------*/


/*----one element Vertically centre--------*/
.wrpr_parent{background-color: #FF0000;  height:500px; width:500px; position: relative; float:left; }
.centre_child{ width:100px; height:100px; background-color:#CCC;  position: absolute; top: 50%;transform: translateY(-50%);}
/*----one element Vertically centre--------*/

/*----more than one element Vertically centre--------*/
.wrpr_parent2{background-color: #6633CC;  height:500px; width:500px;  float:left; }
.centre_child2{ width:100px; height:100px; background-color:#CCC; margin-top:40%; margin-bottom:40%; float:left; margin-right:10px; }
/*----more than one element Vertically centre--------*/


</style>

div_center.html

<!--Both Horizontally and Vertically-->

<div class="wrpr">
<span class="title"> element in horizontaly and verticaly centre</span>
<div class="centre"></div>
</div>
<!--Both Horizontally and Vertically-->









<!--one element in horizontaly centre -->

<div class="wrpr2">
<span class="title"> one element in horizontaly centre</span>
<div class="centre2">1</div>

</div>
<!-- one element in horizontaly centre -->



<!--More than one element in horizontaly centre -->

<div class="wrpr3">
<span class="title">More than one element in horizontaly centre</span>
<div class="centre3">1</div>
<div class="centre3">2</div>
<div class="centre3">3</div>
</div>
<!--More than one element in horizontaly centre -->



<!-- More than one element Vertically and horizontaly centre-->

<div class="wrpr_main">
<span class="title" style="position:absolute;"> More than one element Vertically and horizontaly centre</span>
<div class="centre_main">1</div>
<div class="centre_main">2</div>
<div class="centre_main">3</div>

</div>
<!--More than one element Vertically centre-->


<!--one element Vertically centre-->

<div class="wrpr_parent">
<span class="title" style="position:absolute;"> one element Vertically centre</span>
<div class="centre_child">1</div>
</div>
<!--one element Vertically centre-->


<!-- more than one element Vertically centre-->

<div class="wrpr_parent2">
<span class="title" style="position:absolute;"> more than one element Vertically centre</span>
<div class="centre_child2">1</div>
<div class="centre_child2">2</div>
<div class="centre_child2">3</div>
</div>
<!--more than one element Vertically centre-->