Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to centralize div horizontally and vertically ?

    • 0
    • 3
    • 3
    • 1
    • 0
    • 0
    • 0
    • 0
    • 1.22k
    Comment on it

    Hi all,

    Here are two method to center align a position of div.

    div{
        height: 200px;
        width: 200px;
        background: #ccc;
        top:0;
        bottom: 0;
        left:0;
        right: 0;
        margin: auto;
        position: absolute;
    }
    

    In this method you have to take margin:auto and define all side 0 (if you want excellently in center). But it will support IE7 and above.

    and second is -

    to use css transform, for this method you have left and top position 50% and translate value should be -50% in X and Y axis.

    div{
        height: 200px;
        width: 200px;
        background: #ccc;
        position: fixed;
        left: 50%;top:50%;
        transform: translate(-50%,-50%);
    }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: