CODEWITHSUNDEEP
htmlcss
UI-UX
UI-UX

Reputation: 260

I'm not able to center absolute div?

This is issue

And see this issue on my server 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;
    }

Please Help.

Upvotes: 0

Views: 36

Answers (2)

Dmitriy
Dmitriy

Reputation: 4503

use 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>

or

.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>

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11506

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

Upvotes: 2

Related Questions