html - 垂直对齐 div 内的两个元素

Question

我有以下 div:

<div class="transparent-panel">
    <h3>We asked some of our supports the following questions</h3>
    <a href="#" class="button btn btn-white-big video-button-two">WATCH VIDEO</a>
</div>

我希望文本和按钮显示在 div 的中心。目前看起来像这样:

我没有运气到达中心。这是 transparent-panel div 的 css:

.transparent-panel {
    padding: 40px 20px 40px 20px;
    width: 100%;
    height: 100%; 
    background: rgba(51, 153, 51, 0.7);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#75FFFFFF, endColorstr=#75FFFFFF)";
}

我尝试在 div 上使用 position:relative; ，然后在 h3 和 a 上使用 position:absolute; code> 标签，但这不起作用。

如果有人能帮助我，我将不胜感激。我正在使用 Bootstrap 3。

这是一个 bootply 演示 http://www.bootply.com/sQ5gyYn7Ru

Answer 1

一种方法是将面板包装在容器中，将背景颜色放在容器上，然后使用几行 CSS 将面板在容器内垂直居中:

HTML:

<div class="panel-container">
    <div class="transparent-panel">
        <h3>We asked some of our supports the following questions</h3>
        <a href="#" class="button btn btn-white-big video-button-two">WATCH VIDEO</a>
    </div>
</div>

CSS:

html,body {
  height:100%;
}
.panel-container {
    height:100%;
    background: rgba(51, 153, 51, 0.7);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#75FFFFFF, endColorstr=#75FFFFFF)";
}
.transparent-panel {
    padding: 40px 20px 40px 20px;
    width: 100%;
    text-align:center;
    /* Code to vertically center below */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Bootply Example