响应式设计：将包含图像文本的div对齐在中间中心

Question

我需要

1.中间对齐一个div（contentcontainer），其中包含另一个div容器中的图像和文本。

2.删除不同设备的图像和文本，使其在移动设备和桌面设备上都能很好地显示。

请注意

1.图像和文本的内容html将动态发送，因此内容容器的高度是灵活的。

2.原始图像的大小和文本的长度每次都不同，因此维护者的宽度和高度不能固定值

3.这需要支持android和ios浏览器（主要是safari和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

以下是更新后的代码。

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%;
}