Created
July 8, 2015 19:48
-
-
Save cgkio/b1a074e4c48c770ab789 to your computer and use it in GitHub Desktop.
How to center a responsive element horizontally and vertically while using Bootstrap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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/ --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.vertical-center { | |
min-height: 100%; | |
min-height: 100vh; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
flex-direction: column; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment