Two ways to center an element both horizontally and vertically

center.md

#Option 1: Using flexbox

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

#Option 2: Using tables (for inline-block and block elements)

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.child > .child-of-child {
  margin-left: auto;
  margin-right: auto;
}