vertical align two elements within a div

Question

I have the following 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>

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

Can you create a http://bootply.com demo for the same? Currently your code is working fine in SO snippet. — m4n0, Sep 17 '15 at 14:54
Check out this answer... http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div — hakazvaka, Sep 17 '15 at 14:56
Does this help? http://stackoverflow.com/questions/20142606/in-a-bootstrap-responsive-page-how-to-center-a-div — Tushar Khatiwada, Sep 17 '15 at 14:57
@kosturko that was exactly what I was after. Thank you so much and everyone else who commented. — DMH, Sep 17 '15 at 15:02

score 2 · Accepted Answer · answered Sep 17 '15 at 15:00

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

Just looked at this doesnt appear to work on Safari. – DMH Sep 28 '15 at 13:25 — DMH, Sep 28 '15 at 13:25

score 2 · Answer 2 · answered Sep 17 '15 at 15:00

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>
        <a href="#" class="button btn btn-white-big video-button-two">WATCH VIDEO</a>
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Sep 17 '15 at 15:10

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

}

vertical align two elements within a div

3 Answers3

Bootply Example