8

I am trying to vertically align my login screen. Here is my code in JS Fiddle and used the css 

.flexbox-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;.
    align-items: center;
}

I am not getting my items vertically centered. Will i wont be able to achieve it since i use bootstrap class to horizontal center.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Alaksandar Jesus Gene
  • 6,523
  • 12
  • 52
  • 83

1 Answers1

9

Bootstrap 4

Bootstrap 4 is flexbox by default, and there are flexbox utility classes for centering and alignment. The align-items-center class will work to vertically center rows and columns.

Bootstrap 3.x (orignal answer)

It will center both horizontally and vertically if you make the div and it's containers 100% height:

html,
body,
.fluid-container {
    height: 100%;
}

.flexbox-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    height: 100%;
}

Demo

Another option (for modern browsers) is to set the full height using vh viewport unit:

.flexbox-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    height: 100vh;
}

Demo 2

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 2
    I felt the need to do justice and upvote your answer @Skelly. Not only because I hate when they downvote without leaving a comment but also because your code it's correct. – mosquetero Jul 02 '16 at 05:39