第一種

基於絕對定位，要求有固定的寬高

main{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5em;
  margin-left: -9em;
  
  width: 18em;
  height: 10em;
}

使用calc方法對第一種進行簡化

main{
  position: absolute;
  top: calc(50% - 5em);
  left: calc(50% - 9em);

  width: 18em;
  height: 10em;
}

第二種

在translate變形函式中使用百分比， 不依賴固定寬高

缺點：

 1. 有時候不能使用絕對定位

 2. 如果需喲啊居中的元素已經在高度上超過了視口， 那麼他的頂部會被視口裁剪掉

 3. 在某些瀏覽器中，這個方法肯會導致元素的顯示有一些模糊，因為元素可能被放置在半個 畫素上。

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

  padding: 1em;
}

第三種

基於視口單位vh

main{
  margin: 50vh auto;
  transform: translateY(-50%);
  width: 18em;
}
 

為什麼不能以下程式碼來做那？
margin: 50% auto 0 ;
transform: translateY(-50%);
              

因為margin的百分比值是以父元素的寬高來做解析基準的

第四種

基於Flexbox解決方案-最佳解決方案，只需要考慮flex

main{
  margin: auto;
}
body{
  display: flex;
  min-height: 100vh;
}

第五種

在有寬高的父級下居中

html{
  height: 100%;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}
main{
  ...
}