css - 元素内两个相互重叠的 div 的垂直居中对齐

Question

JS Fiddle 上的代码示例

div 横幅和 ul 具有固定高度。
li标签内的元素需要垂直居中对齐。
我需要将“info-wrapper”div 恰好放置在“disp-img-contanier”div 之上。但是由于我使用的是 position=absolute 和 top=0，所以“info-wrapper”div 会向上移动。

有什么方法可以达到预期的效果？

HTML:

<div class="banner">
<ul class="banner-display clearfix">
    <li class="first-default">
        <div class="disp-img-contanier">
            <!--image goes here-->
            <img src="http://i303.photobucket.com/albums/nn134/gotitlikethat97/Photography/9973TressDunceCap.jpg" width="292px" height="320px" />
        </div>
        <div class="info-wrapper">
            <div class="info-base">
                 <h2>Hover Text</h2>

            </div>
        </div>
    </li>
    <li class="first-default">
        <div class="disp-img-contanier">
            <!--image goes here-->
            <img src="http://i303.photobucket.com/albums/nn134/gotitlikethat97/Photography/9973TressDunceCap.jpg" width="292px" height="320px" />
        </div>
        <div class="info-wrapper">
            <div class="info-base">
                 <h2>Hover Text</h2>

            </div>
        </div>
    </li>
    <li class="first-default">
        <div class="disp-img-contanier">
            <!--image goes here-->
            <img src="http://i303.photobucket.com/albums/nn134/gotitlikethat97/Photography/9973TressDunceCap.jpg" width="292px" height="320px" />
        </div>
        <div class="info-wrapper">
            <div class="info-base">
                 <h2>Hover Text</h2>

            </div>
        </div>
    </li>
</ul>

CSS:

    .banner {
    position: relative;
    z-index: 3;
    height: 550px;
    display: table;
    border-collapse: separate;
    border-spacing: 10px;
}

    .banner .banner-container {
    z-index: 3;
    height: 550px;
    display: table;
    border-collapse: separate;
    border-spacing: 10px;
    width:100%;
}

    .banner-display {
    width: 920px;
    margin: 0 auto;
    z-index: 0;
    height: 550px;
    position: relative;
    padding: 0;
    display: table-row;
}

    .banner-display li {
    width: 292px;
    display: table-cell;
    vertical-align: middle;
    padding-top: 5%!important;
    height: auto;
    position: relative;
    overflow: hidden;
}

    .disp-img-contanier {
    height: 320px;
    width: 292px;
    vertical-align: middle;
    overflow: hidden;
}

    .info-wrapper {
    display: block;
    width: 292px;
    height: 320px;
    position: absolute;
    top: 0;
    background: rgba(225, 225, 225, 0.8);
}

Answer 1

为此，您需要稍微更改一下 css。

.info-wrapper {
  width: 292px;
  height: 320px;
  position: absolute;
  top: 50%;
}

.info-base {
  position: absolute;
  bottom: 50%;
  width: 296px;
  background: rgba(225, 225, 225, 0.8);
  height: 320px;
}

最后，您需要去掉列表元素中的顶部填充，因此:

.banner-display li {
  padding-top:0;
}

这将使 div 垂直居中。如果你需要填充顶部，你会遇到更多的麻烦，特别是如果你是基于一个百分比。祝你好运!