skip to Main Content

I have a div that is width 100% and height 100%. Inside I have a 200px x 200px div. I’d like the 200px x 200px to align to the vertical and horizontal center of the outer div. Like in Photoshop when you align to the vertical or horizontal center. I’ve only been able to align from the edges so far. Is this possible?

Thanks

3

Answers


  1. You can use margin:0 auto; for set automatic margin according to your page position.

    Login or Signup to reply.
  2. One solution can be as follows:

    HTML:

    <div id="parent">
        <div id="child">Content here</div>
    </div>
    

    CSS:

    #parent {display: table;}
    
    #child {
      display: table-cell;
      vertical-align: middle;
      margin: auto;
    }
    

    Do Note: CSS tables are not the same as HTML tables.

    Login or Signup to reply.
  3. <div>
       <div class="two">
       </div>
    </div>
    

    and css

    .two{
      margin: auto;
      vertical-align:middle;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search