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

原文地址：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不兼容。