CSS中的垂直对齐，没有已知高度

以下是我的标记：

<div id="container">
    <img id="image" src="image.jpg" />
    <div id="contents">Contents</div>
</div>

目录

#容器

的高度等于

#图像

的高度。 所有高度都是动态的（它们随窗口大小的改变而改变）。 无法通过“背景”属性设置图像

---

如何将内容覆盖在图像上并垂直居中于

#容器中

​这应该符合你的要求。我刚刚在css中设置了容器和图像的高度，但是如果它们在html或使用javascript中设置相同，结果应该是相同的。背景色只是为了清晰起见

#container {
background-color: #333;
height: 200px;
}
#image{
height: 200px;
float: left;
}
#contents{
line-height: 200px;
float: left;
position: fixed;
}

​

编辑：下面是一个使用旧的经典边距自动技巧的解决方案。这里唯一可能引起问题的是，父对象需要定位：固定；这可能会在其他地方给您带来问题。最重要的是它可以工作，并且不使用像素设置高度

下面是来自fiddle的代码，用于一个没有固定高度的纯css解决方案

<div id="container">
    <img id="image" src="https://www.google.co.uk/logos/2012/juan_gris-2012-hp.jpg" />
    <div id="contents">Contents</div>
</div>

#container {
    position: fixed;
}
#contents{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 10%;
    margin: auto;
}

目录
#容器{
位置：固定；
}
#内容{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
宽度：50%；
身高：10%；
保证金：自动；
}
是否已知
内容物的高度？在这种情况下，应该这样做（）：

如果您知道内容的高度，可以设置

#container{position:relative;}
#contents{
    position:absolute;
    top:50%; /*50% of parent*/
    margin-top:/*negative one-half of container height i.e. if contaner is 4 em -2em*
}

你说你不知道内容的高度

另一个选项是将显示：设置为
表格单元格
，并使用
垂直对齐：中间

#container{
    display: table-cell;
    vertical-align: middle;
}

但这也可能会导致显示问题，具体取决于您要支持的浏览器

更可靠的方法是将第一个选项与一些jquery或javascript相结合，以查找元素的高度并设置其边距顶部：

content= document.getElementById('content')
content.style.marginTop = '-' + content.offsetHeight + 'px';


编辑：对不起，我的javascript中有一个错误，现在试试吧。
来自OP“所有高度都是动态的（它们随窗口大小而变化）。”Ai，误读，尽管他只是指图像和容器高度。来自OP“所有高度都是动态的（它们随窗口大小而变化）。@SergeySedykh我编辑过这个，检查小提琴的工作实现。为什么不能将图像设置为背景？你没有让它工作，或者是有一个特殊的原因，这个选择？我相信这是很容易做到这一点，通过设置一个背景图像。但是这是不可接受的-图像是一个后期缩略图，在SEOI中非常重要，因为高度未知，宽度也未知？关于JS解决方案-这是我现在与jQuery resize（）结合使用的；它在页面加载和通过拖动窗口边缘来调整大小方面效果很好，但在窗口最大化/还原方面存在缺陷。我想我必须深入研究
表格单元格
解决方案。
表格单元格
也不起作用：在
表格单元格
中有两个对象，它们的高度都未知：图像和div。
content= document.getElementById('content')
content.style.marginTop = '-' + content.offsetHeight + 'px';