如何将元素死点定位在高度可变的流体布局中？
需要将box-inside div dead center放置到包装div，其中wrapper div的高度取决于侧边栏div的高度。 box-inside div相对于包装div来说是绝对定位的，并且设置了可变宽度和高度，这与图像和内容相关。
这可以通过给box-inside div赋予宽度和高度来实现，但必须使用可变的宽度和高度（box-inside div必须与img使用填充的尺寸相同）
这里的jsFiddle代码
这是HTML代码：
<body>
<div class="wrapper">
<div class="sidebar"></div>
<div class="inside-box">
<img src="badge.gif" />
</div>
</div>
</body>
CSS
* {
margin: 0;
}
html,body {
height: 100%;
}
body {
background: white;
display: block;
font-family: Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
position:relative;
height: auto;
width:70%;
margin: 0 auto ;
background:green;
}
.sidebar {
height: 500px;
width:30%;
background: red;
clear:both;
}
.inside-box {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:yellow;
min-width:275px; min-height:183px;
padding:10px;
}
目前 
预期产出 
您需要添加一些额外的包装元素，如下所示：
<div class="wrapper">
<div class="sidebar"></div>
<div class="inside-box">
<div class="inside-wrap">
<div class="inside-cell">
<div class="content-wrapper">
<img src="http://s21.postimg.org/lgwltcynr/image.jpg" />
<p>Tyger Tyger burning bright...</p>
</div>
</div>
</div>
</div>
</div>
并应用以下CSS：
.inside-box {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.inside-wrap {
display: table;
width: 100%;
height: 100%;
}
.inside-cell {
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
.content-wrapper {
background-color: yellow;
padding: 10px;
display: inline-block;
}
该解决方案取决于使用CSS表格单元格，除了较旧的IE浏览器外，其具有相当好的支持。
.inside-box包装器用于识别依赖于某些子元素（如侧边栏）的父块的尺寸。
.inside-wrap使用display: table来捕获100％的高度和宽度。
。 .inside-cell使用display: table-cell并允许垂直和水平对齐工作。
最后，你需要一个.content-wrapper来根据需要用一些填充来绘制黄色背景。
.content-wrapper是一个独立的单元，所以你可以放置浮动元素而不会破坏任何东西。
请参阅演示：http://jsfiddle.net/audetwebdesign/6XSqD/
试试这个根据预期输出的jsfiddle并对你的代码做很少的修改。 看看它 -
jsfiddle
上一篇: How to position an element dead center in fluid layout with variable height?