如何在页面上垂直居中div？

Question

如何将#box div垂直居中在页面中心？我试过vertical-align:middle; 但它不起作用.你可以在这里查看网站

这是css:

iframe {
  position: fixed;  
  width: 100vw; 
  height: 100vh;  
  border: none; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  z-index: 999999;
}

body {
  background-color: #000;
}

#box {
  text-align: center;
  vertical-align: middle;
}

#link {
  color: #FFF;
}

#download {
  color: #FFF;
}

Answer 1

方法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);
}

<div class="parent">
  <div class="child"></div>
</div>

方法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);
}

<div class="parent">
  <div class="child"></div>
</div>