display:table图文垂直居中布局

在日常布局当中，碰到需要图文左右两列，垂直居中的情况，即在文字内容高度大于图片高度时，图片相对文字垂直居中，反之，则文字相对图片垂直居中。
对于响应式布局，由于图文字高度的变化，所以要避免出现文字或图片被遮挡住的情况，那么就要设定一定大小的上下padding值。
初次尝试，定义左右浮动，此时display:table-cell布局失效。那要让文字垂直居中，首先想到的是定位：

position: absolute;
top: 50%;
transform: translateY(-50%);

可以实现，但不兼容IE8,只好尝试下面的方法，其中文字内容看情况调整最大宽度max-width(简直丧心病狂)

<div class="frame-desc">
   <div class="text-container"></div>
   <div class="img-container"></div>
 </div>

.frame-desc {
    width: 100%;
    display: table;
    overflow: hidden;
}
.text-container {
    width: 45%;
    display: table-cell;
    vertical-align: middle;
}
.img-container {
    width: 45%;
    display: table-cell;
    vertical-align: middle;
}
//假设响应式布局，在mobile版本下，图片居上、文字居下，我们可以这么设定
.text-container {
    @media(max-with: 767px) {
        width: 100%;
        display: table-footer-group;
    }
}
.img-container {
    @media(max-with: 767px) {
        width: 100%;
        display: table-header-group;
    }
}

通过display:table以及display:table-footer-group等标签，正常图文布局什么的，只是小意思了啊。