html - 垂直对齐绝对 div 内容

Question

好的，我已经阅读了此处关于垂直对齐和绝对定位的问题。但是，它们都没有解决我的问题。

我有以下标记:

<div class="package-container row">
    <div class="col-md-4">
        Col 1
    </div>
    <div class="col-md-4">
        <div class="package-border"><img src="<?php echo home_url(); ?>/wp-content/themes/toolbox/images/package-bg-1.png"/></div>
        <div class="package-title"><?php the_title(); ?></div>
        <?php the_field('description'); ?>
        <?php if(get_field('special')) { ?>
            <div class="package-expries">
                Expires <?php the_field('expiry'); ?> | <a href="<?php echo get_permalink("101");?>">Terms and Conditions</a>
            </div>
        <?php } ?>
    </div>
    <div class="col-md-4">
        <div class="package-border"><img src="<?php echo home_url(); ?>/wp-content/themes/toolbox/images/package-bg-2.png"/></div>
        <div class="package-get">What you get</div>
        <?php the_field('treatments'); ?>
        <div class="package-cost">
            R <?php the_field('cost'); ?>
        </div>
    </div>
</div>

以及以下 CSS:

.entry-content .package-container > div {
    padding:20px 40px;
    min-height: 250px;
}

.entry-content .package-container .package-border {
    position: absolute;
    display:table-cell;
    margin-left: -65px;
    vertical-align: middle;
    min-height: 100%;
    margin-top: -20px;
}

我希望 .package-border 中的两个图像在中间垂直排列。但是，无论我如何更改它，它仍然固定在顶部。

我需要更改上面的哪些内容才能使其正常工作？

编辑:在这里制作了一个 CodePen:http://codepen.io/anon/pen/bCjkI

Answer 1

我不能给你一个工作 fiddle ，因为你已经粘贴了一个带有 php 标签的 html 代码，但是将具有未知高度或高度的定位元素居中的一般规则是:

.element {
    position: absolute;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

请记住，定位将根据具有 position:relative; 的第一个父级(或正文，如果没有其他元素具有 position:relative;