Vertically center two overlapping divs - html

Question

I'm working on a mobile version of my website, and I'm having trouble vertically-centering two divs. Since it is a mobile site, my css needs to work on any type of screen resolution, so this is where I'm having the problem. Also, different images will be used depending on what page you are on, so the resolution of the image is not static either. I need a way to center both my image div and text div no matter their height or width.
I've made a fiddle here to start out with. As you can see, I chose the green area to be the "screen" for the phone, and I want both the picture to center vertically, and the text to be on top of the picture and center vertically as well. Any help?
What I have so far... (in my jsfiddle)
HTML:
<div id = "screen">
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
<div class = "overlay" id = "text">This is where the text would appear</div>
CSS:
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
.overlay {
position:absolute;
top:0;
left:0;
}
#picture {
}
#picture img{
width:100%;
}
#text {
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}

Answer 1

For vertically centering you can set margin top/bottom to auto.
If I understand where you want the text, this should work.
Html
<div id = "screen">
<div class = "overlay" id = "text">This is where the text would appear</div>
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
</div>
and css
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
#picture {
margin: 0 auto;
}
#picture img{
width:100%;
}
#text {
position: absolute;
top:50%;
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}

Answer 2

So it doesn't seem like there is a pure css way to do it, so I ended up using jQuery instead. I made a fiddle in case you want to see how I did it, but the jist of it was this.
On document load, find any item with class "overlay" and apply a negative margin-top of half it's height to center it. Because it already has a position of absolute and top:50%, this will vertically center the item.
$(document).ready(function(){
$(".overlay").each(function(){
$(this).css("margin-top", $(this)[0].scrollHeight/2*-1);
});
});
It's pretty simple, and I wish there was a way to do it in pure css, but this way works as well. Thanks for all the help.

Answer 3

After the discussion in the comments I've determined this question is not nearly thought out well enough to attempt to answer and so this will stay simply in hopes that someone else that finds this page is helped by the answer
:::Initial answer:::
This question is easily much more difficult than you've made it seem. If it's a matter of fitting the image to the viewport of the device there is no single css solution and a javascript solution will be needed.
Let me explain, if the image is much taller than it is wide then to fit the image to the screen you'd want to set the height to something like 90% of the height (give some padding for the text etc). however since the image is variable size if the width is the greater value you'll want the width to something like 90%. Herein lay the problem, you wont want both the height and the width of the image to be 90% as that would distort the image. So there will need to be some javascript to flop around some classes here.
After that the css gets a bit hairy also, if you're looking for an overlay to display the same based on any position the user clicks on an image (assuming this is a sort of gallery) rather than an absolute positioned item at the top and left of the document you'll want a position: fixed; element which is positioned on the viewport.
All described before would need a bit of javascript again because there is no easy way to center something that is fixed without using negative margins of half its width/height.
An example of such a thing is here:
http://jsfiddle.net/5hHMa/2/
Here we have the css for the very fixed case which you have presented.
.overlay {
position:fixed;
top:50%;
left:50%;
margin-top: -150px;
margin-left: -150px;
}
#picture img{
width: 300px;
}
#text {
background-color:#000;
opacity:0.5;
color:#fff;
}
Ideally what you would do is instead of using a fixed value for the margins and width as I have you would determine these values and set them using javascript.
It is hard to form a complete solution for your problem with the limited information given, however hopefully this gives you a push in the correct direction.