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.

Zim
  • 329,487
  • 83
  • 671
  • 600
Alaksandar Jesus Gene
  • 5,522
  • 10
  • 43
  • 74

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

Zim
  • 329,487
  • 83
  • 671
  • 600
  • 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