How to center a responsive element horizontally and vertically while using Bootstrap

index.html

<div class="vertical-center">
    <img src="img/logo.png" class="img-responsive center-block" alt="My Logo">
    <button class="btn btn-default btn-lg spacer">Discover the Button</button>
</div>

<!-- src: http://www.wiredmark.com/center-responsive-element-horizontally-vertically-using-bootstrap/ -->

style.css

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}