Center small div in big div vertically and horizontally

Question

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.net/4Gjxk/

Answer 1

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.net/4Gjxk/1/

Answer 2

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.