1.基於表格樣式

將要使內容居中的外層容器元素的display設定成table，內層內容塊使用table-cell，然後分別設定水平和垂直居中：

            /*表格方案*/
            #table-father{
                display:table;
            }
            #table-child{
                display:table-cell;
                text-align:center;
                vertical-align:middle
 
;
            }

缺點是需要新增額外標記

2.基於絕對定位

如果要居中的元素寬高已知，可以利用負的margin，值是元素自身的寬度和高度的一半

  #child{
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-50px;
        margin-top:-50px;
        width:100px;
        height:100px;
        background:gold;
  }

缺點是無法自適應，如果元素寬高是自適應百分比定義的，就不能用這種方法，因為margin採用百分比是相對於包含塊的寬度而不是元素自身的寬度。

怎麼解決元素自身寬高自適應改變情況下的居中呢？

有兩種方法，一種利用transform屬性，一種利用margin:auto

1.子元素設定position為absolute，相對於父元素進行定位，首先將子元素左上角定位到父元素中心，即使用top:50%和left:50%定位到中心，然後使用translate()相對於自身的高寬的一半進行移動，即可把自己的中心移到父元素的中心（這裡可以使用margin-top和margin-left指定值進行移動操作，但是前提是需要知道子元素的高寬，如果子元素高寬由內容決定，那麼就只能用translate，因為translate函式中的百分比是相對於元素自身的高寬來計算的），定位的缺點在於絕對定位可能影響佈局，以及可能元素會顯示模糊：

            /*絕對定位方案*/
            #position-child{
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
            }

或者2絕對居中，但如果是可變高度必須宣告高度

                .absolute-center {  
                  margin: auto;  
                  position: absolute;  
                  top: 0; left: 0; bottom: 0; right: 0;  
                  width:50%;
                  height:50%;
                } 

3.基於視口單位

要把元素相對於視口進行居中，那麼相當於父元素的高度就是視口的高度，視口的高度可以用vh來獲取：

            /*相對於視口單位進行居中的解決方案*/
            #view-child{
                margin:50vh auto 0;
                transform:translateY(-50%);
            }

4.基於Flexbox

最佳方案是使用Flexbox，但是要考慮到瀏覽器的支援：

相容性寫法：

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;

當父元素設定為display:flex後，子元素設定margin:auto就可以相對於父元素在垂直和水平方向進行居中：

            /*基於伸縮盒的解決方案*/
            #flex-father{
                display:flex;

            }
            #flex-child{
                margin:auto;
            }

如果不使用margin使用flex中的屬性，父元素也可以寫成：

            div#flex-father{
                display:flex;
                align-items:center;
                justify-content: center;
            }

5.總結

垂直居中有四種方法：
1.基於表格樣式，可以不使用表格元素而在需要內容居中的容器元素上設定display:table-cell以及text-align和vertical-align屬性設定居中；
2.基於絕對定位，可能影響佈局和出現顯示模糊的問題
3.基於視口單位實現相對於視口居中
4.基於Flexbox，需要考慮瀏覽器支援

6.參考