垂直对齐 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;，但这不起作用。

如果有人可以帮助我，将不胜感激。我正在使用 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

Answer 2

我发现将容器 div 设置为 display: table 并将内容包装在内部 div 中设置为 display: table-cell 很有用。

然后你可以使用vertical-align属性：

Updated BootPly

/* CSS used here will be applied after bootstrap.css */
.teachers-image {
  background-size: cover;
  height: 418px;
  color: #ffffff;
}

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

.transparent-panel > div {
  	display: table-cell;
    vertical-align: middle;
  }

.btn-white-big {
  background-color:  #ffffff;
  height: 50px;
  color: #339933;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  @include add-border(3px, white, all);
  @include border-radius(30px);

  &:hover,
  &:focus,
  &.focus {
    background-color: #339933 !important;
    color: white;
 }
}

<div class="teachers-image">
  <div class="transparent-panel">
    <div>
        <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>
</div>

Answer 3

使用具有 View Height 的容器从上到下居中：

height: 100vh;

视图高度将始终使用窗口显示高度。

Fiddle

HTML：

<div class="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：

    .container {
    height: 100vh;
    background: rgba(51, 153, 51, 0.7);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#75FFFFFF, endColorstr=#75FFFFFF)";
}
.transparent-panel {
    width: 100%;
    text-align:center;
    position: relative;
    top: 50%;

}