css horizontally and vertically center

horizontal-and-vertical-center.css

/*
=======================================================================================
  Using negative margins equal to half of that width and height,
  after you've absolutely positioned it at 50% / 50% will center
  it with great cross browser support.
======================================================================================
*/

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

/*
  =======================================================================================
    If you don't know the width or height,
    you can use the transform property and a negative translate of 50% in both directions
    (it is based on the current width/height of the element) to center.
  =======================================================================================
  */

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*
  =======================================================================================
    To center in both directions with flexbox, you need to use two centering properties:
  =======================================================================================
  */

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