大家都知道css里面用text-align:center加上margin:0 auto就可以實現水平居中了，但是垂直居中卻沒有相應的css屬性來設置，而如果要設置元素能夠垂直居中必須得將容器設置為display:table，然后將子元素也就是要垂直居中顯示的元素設置為display:table-cell，然后加上vertical-align:middle來實現。
通過CSS3的transform來實現

CSS Code復制內容到剪貼板

.center-vertical {   
  position: relative;   
  top: 50%;   
  transform: translateY(-50%);   
}   
.center-horizontal {   
  position: relative;   
  left: 50%;   
  transform: translateX(-50%);    
}