我需要如下定位3个对象：
Div 1是一个绝对定位的容器，具有固定的宽度、高度和位置。图像1应该是一个绝对定位的图像，只具有固定的左对齐位置。Div 2应该是一个绝对定位的Div，只有一个固定的左对齐位置。
我需要Image1和Div2与Div1的垂直中心对齐，因为它们是具有动态高度的可变文本和图像元素。
示例：
Div 1固定为200像素高。图像1为52px高可变
图像1应垂直放置：
（200/2）+（52/2）=126px
我已经研究过CSS表格单元格、垂直对齐、边距为%等，但无法做到这一点。
谢谢。
.div1
{
position: absolute;
width: 100px;
height: 100px
top: 100px;
left: 100px;
}
.image1
{
position: absolute;
left: 10px;
// something here to align the image in the vertical middle of div1
}
.div2
{
position: absolute;
left: 60px;
// something here to align the image in the vertical middle of div1
}
<div class="div1"><img class="image1"><div class="div2"></div></div>
更新代码：
<head>
<style type="text/css">
.div1 {
background: yellow;
display: table;
position: absolute;
width: 300px;
height: 300px;
top: 100px;
left: 100px;
}
.newdiv {
display: table-cell;
vertical-align: middle;
height: 300px;
}
.image1 {
left: 10px;
position: relative;
width:50px;
height: 80px;
background: blue;
}
.div2 {
position: relative;
background: red;
left: 70px;
width: 100%;
height: 200px;
}
</style>
</head>
<div class="div1"><div class="newdiv"><div class="image1" /></div><div class="div2">123</div></div></div>
尝试一下，您必须在第一个div中添加另一个div：
<head>
<style type="text/css">
.div1 {
background: yellow;
display: table;
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
}
.newdiv {
display: table-cell;
vertical-align: middle;
}
.image1 {
left: 10px;
position: relative;
}
.div2 {
position: relative;
background: red;
left: 6px;
}
</style>
</head>
<div class="div1"><div class="newdiv"><img class="image1" /><div class="div2">123</div></div></div>
UPDATE（我找到了另一种方法，没有新的div，我没有在IE中测试它。）：
<head>
<style type="text/css">
.div1 {
background: yellow;
position: relative;
width: 300px;
height: 300px;
top: 100px;
left: 100px;
}
.image1 {
left: 10px;
position: absolute;
width:50px;
height: 80px;
background: blue;
top:0;
bottom:0;
margin:auto;
}
.div2 {
position: absolute;
background: red;
left: 70px;
width: 100px;
height: 200px;
top:0;
bottom:0;
margin:auto;
}
</style>
</head>
<div class="div1">
<div class="image1" /></div>
<div class="div2">123</div>
</div>
.image1,
.div2 {
position: absolute;
top:0;
bottom:0;
margin: auto;
}
jsFiddle