Let's look at the following example? <div style="height:300px;vertical-align:middle;border: 1px solid red"> <div style="vertical-align:middle;border: 1px solid green"> I wan this green box to be in the middle of the red box </div> </div> HTML: With tables, I can simply use valign="middle". But can I do that with CSS and div and how?
I could get the greenbox centered with margin:auto (or margin-left: auto; margin-right; auto) but could never get it to move down to truly sit inside the redbox. I set height and width of redbox to 300px and greenbox to 200px. I tried margin-top: 50px on greenbox, but it was redbox that moved down the page instead, even after setting margins on redbox to 0 (green's overruled). If I played with padding-top on greenbox, to move the text down, greenbox grew until popping out of redbox. The only way I could get greenbox to sit in the middle of redbox was with absolute positioning, where greenbox used the side of the browser window (body) as reference instead of redbox (which was not what you wanted).
Thanks for replying. I Googled it and found some solutions. Such as set div display property to table...However, there are no solutions that look naturally.