1.基於表格樣式

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

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

2.基於絕對定位

有兩種方法，一種利用transform屬性，一種利用margin:auto （定位的缺點在於絕對定位可能影響佈局，以及可能元素會顯示模糊）

             /*絕對定位方案*/
            #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

要考慮相容性問題，相容性寫法：

  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;
}

總結

垂直居中有四種方法：

1.基於表格樣式，可以不使用表格元素而在需要內容居中的容器元素上設定display:table-cell以及text-align和vertical-align屬性設定居中；

2.基於絕對定位，可能影響佈局和出現顯示模糊的問題

3.基於視口單位實現相對於視口居中

4.基於Flexbox，需要考慮瀏覽器支援