Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Center a div vertically in another div

    Hi,

    I am sure this question was asked more than 100 times but I still can not find a simple answer, how to center a Div vertically inside another Div?

    One of my colleagues told me to use padding to push the inner Div to center, I don't think it's a good idea, please do not give me the same answer.

    TIA

  • #2
    Regular Coder
    Join Date
    Jul 2010
    Posts
    271
    Thanks
    3
    Thanked 40 Times in 40 Posts
    Try this.

    <div style="position: relative; width:200px; height:200px; background-color:blue;">
    <div style="position: absolute; width:100px; height:100px; top: 50%; margin-top: -50px; background-color:red;">
    Centered Box
    </div>
    </div>

  • #3
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    This link might help out as well.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •