Vertically Center Two Elements Within a Div

#buttonContainer {  /* make element inline flex-container */  /* this will make its children flex-items */  display: inline-flex;  /* align-items items in column */  flex-direction: column;  /* center items horizontally */  align-items: center;  /* center items vertically */  justify-content: center;    border: solid 3px black;  width: 400px;  height: 400px;}

<div id="buttonContainer">  <button id="b1" class="button">Button 1</button>  <button id="b2" class="button">Button 2</button></div>

How to vertically align two or more (side by side) elements in a div?

Put the vertical align on the inner divs

#footer-twitter{
  display:inline-block;
  vertical-align:middle;
}

#footer-fb{
  display:inline-block;
  vertical-align:middle;
}

How can I vertically align elements in a div?

Wow, this problem is popular. It's based on a misunderstanding in the vertical-align property. This excellent article explains it:

Understanding vertical-align, or "How (Not) To Vertically Center Content" by Gavin Kistner.

“How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations.

In a nutshell _{^{(and to prevent link rot)}}:

• Inline elements (and only inline elements) can be vertically aligned in their context via vertical-align: middle. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle example
• For block elements, vertical alignment is harder and strongly depends on the specific situation:
  
  • If the inner element can have a fixed height, you can make its position absolute and specify its height, margin-top and top position. jsfiddle example
  • If the centered element consists of a single line and its parent height is fixed you can simply set the container’s line-height to fill its height. This method is quite versatile in my experience. jsfiddle example
  • … there are more such special cases.

Vertically centering a div inside another div

tl;dr

Vertical align middle works, but you will have to use table-cell on your parent element and inline-block on the child.

This solution is not going to work in IE6 & 7.
Yours is the safer way to go for those.
But since you tagged your question with CSS3 and HTML5 I was thinking that you don't mind using a modern solution.

The classic solution (table layout)

This was my original answer. It still works fine and is the solution with the widest support. Table-layout will impact your rendering performance so I would suggest that you use one of the more modern solutions.

Here is an example

Tested in:

• FF3.5+
• FF4+
• Safari 5+
• Chrome 11+
• IE9+

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

Modern solution (transform)

Since transforms are fairly well supported now there is an easier way to do it.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Demo

♥ my favourite modern solution (flexbox)

I started to use flexbox more and more its also well supported now Its by far the easiest way.

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Demo

More examples & possibilities:
Compare all the methods on one pages

How to vertically center two child elements?

Try this

.resume-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

center two child elements vertically in flexbox

You can make those boxes display: flex; align-items: center; justify-content: center; to center the contents vertically and horizontally.

body {    background: #2F546B;    margin: 0;    font-family: 'Roboto', sans-serif;}
#current {    display: -webkit-box;    display: -ms-flexbox;    display: flex;    -ms-flex-wrap: wrap;        flex-wrap: wrap;}
.current_details {    display: -webkit-box;    display: -ms-flexbox;    display: flex;    -webkit-box-orient: vertical;    -webkit-box-direction: normal;        -ms-flex-direction: column;            flex-direction: column;    width: 200px;    height: 300px;    margin: 5px 5px;    text-align: center;    border: 2px solid red;}
.current_details div {    font-size: 2em;    border: 2px solid #fdfefe;    display: flex;    align-items: center;    justify-content: center;}
.current_details div:nth-child(1) {    -webkit-box-flex: 1;        -ms-flex: 1;            flex: 1;}
.current_details div:nth-child(2) {    color: #000;    background: #fdfefe;    -webkit-box-flex: 2;        -ms-flex: 2;            flex: 2;}

<div id="current">    <a ng-repeat="(key, value) in vm.currentQuotes" ng-href="#!/current/{{key}}">        <div class="current_details">            <div>AUD</div>            <div>1.5045</div>        </div>    </a></div>

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

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