CSS 的垂直居中

main { 
  position: absolute;  
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
}

• vw ：1% of viewport’s width

• vh ：1% of viewport’s height

• vmin ：1% of viewport’s smaller dimension

• vmax ：1% of viewport’s larger dimension

• 在我们的这个例子中，适用于外边距的是 vh 单位：
  main {
      width: 18em;
      padding: 1em 1.5em;
      margin: 50vh auto 0; 
      transform: translateY(-50%);
  }
  这个技巧的实用性是相当有限的，因为它只适用于在视口中居中的场景。

  

  我们先给这个 main 元素指定一个固定的尺寸，然后借助 Flexbox 规范 所引入的 align-items和 justify-content 属性，我们可以让它内部的文本也实现居中：

•