Bootstrap vertical center container in footer - html

Question

I'm attempting to create a footer for my first page in Bootstrap and it looks fine except the contents should be centered vertically. After inspecting the elements in Chrome, it looks like the actual container element is about 50% the height of the parent footer element.
Now I was able to partially fix this by setting the "line-height" to match the "height" property of the footer, but when doing so, it caused part of the contents to appear well below the footer. What am I doing wrong and how can I fix this?
Without Line-Height:
With Line-Height:
<!-- Site footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>
Home | About Us | Contact
<br />
© Website 2016. All rights reserved.
</p>
</div>
<div class="col-sm-6">
<p class="muted pull-right">
<i id="social-fb" class="fa fa-facebook-square fa-2x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-2x social"></i>
<i id="social-gp" class="fa fa-google-plus-square fa-2x social"></i>
<i id="social-em" class="fa fa-envelope-square fa-2x social"></i>
</p>
</div>
</div>
</div>
</footer>
CSS
footer
{
height: 100px;
background:#fff;
margin-top:20px;
line-height: 100px;
}

Answer 1

You can use display:flex + align-items:center to achieve that.
footer
{
height: 100px;
background:#fff;
margin-top:20px;
display:flex;
align-items:center;
}
jsfiddle

Answer 2

Try adding padding-top and padding-bottom instead of line-height:
footer
{
height: 100px;
background:#fff;
padding: 2% 0;
}

Answer 3

You can use table properties for vertical alignment.
HTML:
<!-- Site footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>
Home | About Us | Contact
<br />
© Website 2016. All rights reserved.
</p>
</div>
<div class="col-sm-6">
<p class="muted pull-right">
<i id="social-fb" class="fa fa-facebook-square fa-2x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-2x social"></i>
<i id="social-gp" class="fa fa-google-plus-square fa-2x social"></i>
<i id="social-em" class="fa fa-envelope-square fa-2x social"></i>
</p>
</div>
</div>
</div>
</footer>
CSS:
footer {
background:#fff;
margin-top:20px;
}
footer p {
margin: 0;
}
footer .container .row {
display: table;
width: 100%;
height: 100px;
}
footer .container .row > div {
display: table-cell;
vertical-align: middle;
float: none;
}
Working example: https://jsfiddle.net/62shy0ob/1