我無法居中絕對div嗎？

Question

，看到我的服務器HERE

.login-div{ 
     background: #fff none repeat scroll 0 0; 
     height: 500px; 
     left: 50%; 
     width: 500px; 
     right: 0; 
     z-index: 99999; 
     top: 20%; 
     position: fixed; 
    } 

請幫助解決這一問題。

Answer 1

.login-div { 
    background: #fff none repeat scroll 0 0; 
    height: 500px; 
    width: 500px; 
    position: absolute; 
    z-index: 99999; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin:auto; 
} 

Answer 2

使用transform: translate

.login-div { 
    background: #fff none repeat scroll 0 0; 
    height: 500px;  
    width: 500px;   
    z-index: 99999;  
    position: absolute; top: 50%; left: 50%; 
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
} 

body{ 
 
    background: #ccc; 
 
} 
 

 
.login-div { 
 
    background: #fff none repeat scroll 0 0; 
 
    height: 500px; 
 
    width: 500px; 
 
    z-index: 99999; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}

<div class="login-div"></div>

或

.login-div { 
     background: #fff none repeat scroll 0 0; 
     height: 500px;  
     width: 500px;   
     z-index: 99999;  
     position: absolute; top: 50%; left: 50%; 
     margin-top: -250px; 
     margin-left: -250px; 
    } 

body{ 
 
    background: #ccc; 
 
} 
 

 
.login-div { 
 
    background: #fff none repeat scroll 0 0; 
 
    height: 500px; 
 
    width: 500px; 
 
    z-index: 99999; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -250px; 
 
    margin-left: -250px; 
 
}

<div class="login-div"></div>