I am trying to vertically center a div inside another div, regardless of the size of both div's

I am doing this:

<div id='outer_div'>
    <div id='inner_div'></div>
</div>

The CSS is

#outer_div {
   display: table-row; 
   height: 200px; 
   width: 200px
}

#inner_div {
   display: table-cell; 
   vertical-align: middle;
   height: 500px; 
   width: 500px
}

I put larger dimensions for the inner div on purpose. What happens is that even if I put a width of 1000px, the width of the innerdiv is ceiled at 200px because of the outer div's width (and this is what I want)

But for the height, it is not ceiled and I would like it to be ceiled to the height of the outer div.

What i want is the innerdiv to remain at the same size as the outer_div, no matter what height I give to outer_div in CSS. I basically want it to be the same size as its parent.

EDIT: I only put text inside those div's. So let's say I have an outer div of 200px*200px (it has display: table-row), and the inner div is defined by css as 500px*500px and it has dummy text inside. My expected result is to have the inner div shrunk down to 200px*200px. It is successfully 'shrunk' by the outer div for the width, but NOT for the height. What I want is to have it shrunk on the height as well (so the inner div ajusts automatically in case I change the height of the outer div)

How do I go about that?