vertical align two elements within a div - html

Question

I have the following div:
<div class="transparent-panel">
<h3>We asked some of our supports the following questions</h3>
WATCH VIDEO
</div>
and I want the text and button to appear centred within the div. Currently it appears like so:
and I am having no luck getting to centre. Here is the css for the transparent-panel div:
.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)";
}
I tried using position: relative; on the div and then position: absolute; on the h3 and a tag but that didn't work.
If anyone can help me out it would be much appreciated. I am using Bootstrap 3.
Here is a bootply demo http://www.bootply.com/sQ5gyYn7Ru

Answer 1

One way to do it would be to wrap the panel in a container, put the background color on the container and then use a few lines of CSS to vertically center the panel within the container:
HTML:
<div class="panel-container">
<div class="transparent-panel">
<h3>We asked some of our supports the following questions</h3>
WATCH VIDEO
</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

I find it useful to set the container div as display: table, and wrap the content in a inner div set as display: table-cell.
Then you can use the vertical-align property:
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>
WATCH VIDEO
</div>
</div>
</div>

Answer 3

Use a container with View Height for top to bottom centering:
height: 100vh;
The View Height will always use the windows display height.
Fiddle
HTML:
<div class="container">
<div class="transparent-panel">
<h3>We asked some of our supports the following questions</h3>
WATCH VIDEO
</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%;
}