Css 将内容包含在已知大小的容器内并将其居中

我们有一个已知大小的容器

在内部，我们有未知高度的内容

我们需要在容器中包含该内容，同时水平和垂直居中

内容由块组成：标签、图像、标签：

对于比容器短的内容，我成功地做到了这一点，但在另一种情况下，我运气不佳。 例如：

---

我在问题中指出，标签、图像和标签都是块（即垂直排列），都是内容的子元素。我在你的小提琴上添加了一个图像：请注意，内容是如何拉伸容器而不是包含在容器中的。你希望图像具有固定高度吗？图像需要保持纵横比吗？我想这是我们能得到的最接近的。塔克斯！问题在于表格单元格。它会自动调整大小，因为CSS 2.1规则，表格单元格的高度是“内容所需的最小高度”。一个正确的解决方案将不得不包括表单元，但我不知道如何做到这一点没有抱歉。链接：图像是否需要水平放置在框内？

#content-wrapper {
    text-align: center;
    height: 200px;
    width: 200px;
    display: table;
}

#img-wrapper {
    width: 100%;    
    height: 100%;
    vertical-align: middle;   
    display: table-cell;
}

#img-wrapper label {
    display: block;  
    height: 25px;
    line-height: 25px;
}

#img-wrapper img { 
    max-height: 150px;
}