My code is as follows:

<div id="bigDiv">
  <div id="smallDiv">DD</div>
</div>

My CSS is as follows:

#bigDiv {
  border: 1px solid red;
  height: 300px;
  width: 300px;
  vertical-align: middle;

}

#smallDiv {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  margin: 0 auto;
}

I want to center the small div vertically and horizontally inside the big div. The horizontal works, but the vertical doesn't.

/

My code is as follows:

<div id="bigDiv">
  <div id="smallDiv">DD</div>
</div>

My CSS is as follows:

#bigDiv {
  border: 1px solid red;
  height: 300px;
  width: 300px;
  vertical-align: middle;

}

#smallDiv {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  margin: 0 auto;
}

I want to center the small div vertically and horizontally inside the big div. The horizontal works, but the vertical doesn't.

http://jsfiddle/4Gjxk/

• javascript
• html
• css

• if you don't care about IE7, just add display: table-cell to your #bigDiv { :) – Morpheus Commented Jan 11, 2013 at 15:32

6 Answers 6

Read this: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

If you cannot be bothered reading do this:

    #bigDiv {

      position: relative; /* Needed for position: absolute to be related to this element and not body */

      border: 1px solid red;
      height: 300px;
      width: 300px;
      vertical-align: middle;
    }

And change the other to:

#smallDiv {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  border: 1px solid black;
  height: 100px;
  width: 100px;

}

Here is the updated jsfiddle: http://jsfiddle/4Gjxk/1/

I believe this is the most straight-forward solution with the least amount of CSS. Since 100 / 300 = ~.33 you can use a 33% margin like so:

#bigDiv {
  border: 1px solid red;
  height: 300px;
  width: 300px;
}

#smallDiv {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  margin: 33%;
}

Here's the updated jsFiddle.

Should be:

#smallDiv{
    position:absolute;//? relative?
    top:45%;
    left:45%;
}

That should be just about right but I'm sure someone will e up with a better method. Obviously you could also do pixels so top:100px;left:100px; Will work also perhaps better in your case :).

Try with absolute positioning. You just have to know the width of the element to place it right in center.

  #bigDiv {
    border: 1px solid red;
    height: 300px;
    position: relative;
    vertical-align: middle;
    width: 300px;
}

  #smallDiv {
        border: 1px solid black;
        height: 100px;
        left: 50%;
        margin: -50px auto 0 -50px;
        position: absolute;
        top: 50%;
        width: 100px;
    }

If you need to do it without knowing the exact size of the boxes (if they may change) this is a slightly hacky way of doing it: http://jsfiddle/gXbqm/

#bigDiv {
  border: 1px solid red;
  height: 300px;
  width: 300px;
  vertical-align: middle;
  display:table-cell

}

#smallDiv {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  margin: 0 auto;
  vertical-align:center;
}

If you know that those divs will always be 100x100 and 300x300 though, Jonathan.cone's solution is cleaner

add this to #smallDiv:

margin-top: 100px;