How to vertically center a div on page? [duplicate]

Answer 1

Method 1 (position, transform-translate):

* {
  padding: 0;
  margin: 0;
}
.parent {
  position: relative;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: gray;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10em;
  height: 5em;
  background-color: white;
  box-shadow: 1px 1px 10px rgba(0,0,0,.4);
}

Method 2 (Flexbox):

* {
  padding: 0;
  margin: 0;
}

.parent {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: gray;
  display: flex;
}

.child {
  margin: auto;
  width: 10em;
  height: 5em;
  background-color: white;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .4);
}