原文地址：http://blog.csdn.net/chueia/article/details/68927501

第一種：

position:fixed;  
top:0;  
right:0;  
left:0;  
bottom:0;  
margin:auto; 
//height:30%;

這種方法在元素的寬高不固定時會全屏拉伸元素，在高度不固定靠子元素撐開自適應的情況下不適用。但是在寬高固定的情況下可以用，沒有兼容性問題。

第二種：

position:fixed;  
top:50%;  
left:50%;  
transform:translateX(-50%) translateY(-50%);  

用top:50% left:50%定位後元素的左上角會處於頁面中間。

transform:translateX(-50%) translateY(-50%)是CSS3的新寫法，讓元素相對於他自身的寬高反向移動。配合上面的代碼就能實現居中定位，而且適用於不確定寬高的元素，但是在低版本IE不兼容。

彈出框頁面居中顯示的兩種方法