responsive design: align div containing image text at the middle center - css

Question

I need to
1.Middle center align a div(contentcontainer) which contains image and text inside another div container.
2.Render the image and text for different devices so it looks nicely on both mobile and desktop devices.
Please note
1.The content html for the image and text will be sent dynamically so the height of the content container is flexible.
2.The size of the original image and length of the text are different each time so the width and height of the maintainer cannot be fixed values
3.This needs to support android and ios browsers(mainly safari and chrome).
**JSFIDDLE*
http://jsfiddle.net/1o8vuqbd/1/
<div id="maincontainer">
<div id="contentcontainer">
<img src="http://placehold.it/150x150">
<div style="text-align:left;">
<div>This is the title</div>
<div>This is the body</div>
</div>
</div>
</div>
#maincontainer {
height:100%;
width:100%;
padding:5px;
background-color:red;
}
#contentcontainer {
height:100%;
width:100%;
position: relative;
background-color:pink;
}

Answer 1

Here is the updated code.
HTML:
<div id="maincontainer">
<div id="contentcontainer">
<img src="http://placehold.it/150x150" style="float: left;">
<div style="text-align:left;">
<div>This is the title</div>
<div>This is the body</div>
</div>
</div>
</div>
CSS:
#maincontainer {
height: 500px;
position: relative;
width: 500px;
background-color:red;
}
#contentcontainer {
background-color: #FFC0CB;
overflow-y: auto;
position: absolute;
left: 25%;
top: 25%;
width: 50%;
}