Vertical Centering in CSS

<div id="containter">
        everything is vertically centered here.
</div>
<style>
#containter {
    height: 400px;
    display: flex;
    /* flex-direction: column;*/
    align-items: center; 
    /* justify-content: center;*/
}
</style>

Vertically center alignment in BootStrap3

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="row center" style="border:1px solid black;">
  <div class="col-sm-4" style="background-color:white;">
   test
  </div>    
<div class="col-sm-8 ">
  test </br>
  test </br>
  test </br>
  </div>    
</div>


CSS

.center {  
  display:flex;
   align-items:center !important; 
   text-align:center;       
}

@media ( min-width:768px ) {
.center {
      display:flex;
      align-items:center !important;     
      text-align:center;     
  }
}

@media ( min-width: 992px ) {
   .center {     
     display:flex;
       align-items:center !important;      
       text-align:center;          
    }
}

@media ( min-width: 1200px ) {
    .center {      
       display:flex;
        align-items:center !important;      
        text-align:center;        
    }
}

CodePen

Vertical align anything with just 3 lines of CSS

HTML Part:

<!DOCTYPE html>
<html>
<head> </title>
<body>
<section class="text">
  <p>I'm vertically aligned! Hi ho Silver, away!</p>
</section>
</body>
</html>

CSS Part:

body {
  font-family: Helvetica Neue, Helvetica, sans-serif;
  background: #59488b;
  padding: 1em;
  -webkit-font-smoothing: antialiased;
}

section {
  display: block;
  max-width: 500px;
  background: #433669;
  margin: 0 auto 1em;
  height: 140px;
  border-radius: .5em;
  color: white;
}

.text p {
  position: relative;
  top: 50%;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
  text-align:center;
}

CodePen
This code has been taken from here