Flexbox Vertical and horizontal center with boot classes

Question

I am trying to vertically align my login screen. Here is my code in JS Fiddle and used 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 do not get my objects vertically. I will not be able to achieve this, since I am using the bootstrap class in the horizontal center.

Answer 1

Bootstrap 4

Bootstrap 4 is flexbox by default, and for centering and aligning flexbox utility classes . The class align-items-centerwill work with the vertical centers of rows and columns .

---

Bootstrap 3.x (orignal answer)

, , div 100% :

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%;
}

( ) , vh:

.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;
}

2