在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)";
}

我嘗試使用position: relative; 在div上，然后position: absolute; 在h3和a標簽上，但這h3 。

如果有人可以幫助我，將不勝感激。 我正在使用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%);
}

引導示例

Answer 2

我發現將容器div設置為display: table並將內容包裝在設置為display: table-cell的內部div中很有用。

然后，您可以使用vertical-align屬性：

更新了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

使用具有“查看高度”的容器從上到下居中：

height: 100vh;

視圖高度將始終使用窗口顯示高度。

小提琴

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%;

}