Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to horizontally center a div inside a div?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 439
    Comment on it

    Hi Readers!

    We are usually using multiple divs inside a div. For the purpose of increasing interactiveness in the web page, we may want to align the inner divs properly, maybe horizontally or vertically. 

    Like in the following case :

    <div id="outer" style="width:100%">  
      <div id="inner">Inner Div</div>
    </div>

    How do we do it?

    I am providing the solution below. In my opinion, this is the best all-around method to do so, that is tested and worked.

    We just have to include the following three lines of CSS :

    1. position: relative;
    2. top: 50%;
    3. transform: translateY(-50%);

     

    Below is a sample code snippet :

    HTML :

    As above

     

    CSS :

    div.outer {
      height: 200px;
      width: 300px;
      background-color: lightgray;
    }
    
    div.inner {
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }

     

    OUTPUT :

     

    Keep Coding!

 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: