我已经建立了一个 3 列布局。我想在中间内容的图像上放置一些文本（标题）。但是每次我调整浏览器窗口的大小时，文本都会移动。有什么建议么？我想，在将图像放置在绝对容器中（它本身是相对容器中）时，我可以在不移动元素的情况下定位任何绝对层。有什么建议么？
这里有一个 jsfiddle：http: //jsfiddle.net/Dkjsc/3/
更新： 如果我们从中间内容中删除高度属性，一切正常。但这是一条路吗？
HTML：
<div id="content" class="content">
<!--LEFT-->
<div id="leftcontent" class="leftcontent"> </div>
<!--MIDDLE-->
<div id="middlecontent" class="middlecontent">
<div id="heading" class="heading">Text</div>
<img src="images/Windows/Window_10.png" alt="" style="width:100%;">
</div>
<!--RIGHT-->
<div id="rightcontent" class="rightcontent"> </div>
</div>
CSS：
html, body {
margin:0px;
padding:0px;
width:100%;
height:100%;
}
.content {
position:relative;
width:100%;
height:100%;
}
.leftcontent{
position:absolute;
width:20%;
height:100%;
left:0%;
}
.middlecontent {
position:absolute;
text-align:center;
width:60%;
height:100%;
left:20%;
top:10%;
}
.rightcontent {
position:absolute;
width:20%;
height:100%;
right:0%;
}
.heading{
position:absolute;
text-align:center;
width:100%;
top:12%;
}