CSS Verticlally Middle.

Vertically Align middle of a Div or HTML element.

1)Using transform styling:
=====================
.child {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

2) Using the table styling:
==========================
.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

3)Using the display flex:
=========================
display:flex;
align-items:center;

4) Using the position absolute:
===============================
.parent {
  height: 100px;
  width: 100px;
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

5)Using line-height:
===================
.child{
    line-height: 50px;
    vertical-align: middle;
}

6)Using -ve margin:
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  height:50px;
  margin-top:-25px;
}