How center horizontaly and verticaly a div

How center horizontaly and verticaly a div

by Luca Giuberti

HTML

<div class="canvas-container">
<canvas class="canvas" width="50" height="50"></canvas>
<div class="value">
8
</div>
</div>

CSS

.canvas-container{
  position: relative;
  width:50px;
  height: 50px;
}

.canvas{
  border: 1px solid red;
  position: absolute;
  top:0;
  left:0;
}

.value{
  width:20px;
  height:20px;
  top: 0;
  bottom:0;
  left: 0;
  right:0;
  position: absolute;
  border: 1px solid blue;
  margin:auto;
}