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?
