How to middle align the content of the div with height 100vh?

Question

.components{
    background-color: #1DA1F2;
    text-align: left;
     height: 100vh;
     padding: 20px;
 }

I've used height:100vh on the outer div which surrounds the content but i cannot get the div content to align in the middle of the screen. How can that be done ? The outer most div is .components and the inner div is .row

Answer 1

I made a simple example below ( Hope i understood what you wanted )

Just add display:flex;align-items:center on the .components . I used bootstrap but only for the cols to stay side by side . It doesn't matter how you arranged your layout , bootstrap or not, display:flex will work

 .components { background-color: #1DA1F2; text-align: left; height: 100vh; padding: 20px; display:flex; align-items:center; } .row { width:100%; } .col-sm-4 { background:red; height:50px; } 

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="components"> <div class="row"> <div class="col-xs-4"> col </div> <div class="col-xs-4"> col </div> <div class="col-xs-4"> col </div> <div class="col-xs-4"> col </div> <div class="col-xs-4"> col </div> <div class="col-xs-4"> col </div> </div> </div>