title: Vertically center input inside a div
body: <p>I want to have the <code>input</code> fields vertically centered inside each div viz. <code>color-1</code> <code>color-2</code> <code>color-3</code><br>
  Using <code>vertical-align: middle</code> either in each div or <code>input</code> is not working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  input[type="text"]  {
    width:150px;
    height: 30px;
    text-align: center;
  }
  
  #color-1 {
  
    height: 33%;
    background: {{yourName}};
    text-align: center; 
    vertical-align: middle;
  }
  
  #color-2{
    height: 33%;
    background: {{color_2}};
    text-align: center; 
    vertical-align: middle;
  }
  
  #color-3{
    height: 33%;
    background: {{color_3}};
    text-align: center; 
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="color-1"&gt;
    &lt;input type="text" ng-model="color_1" placeholder="Enter Color #1"&gt;
    &lt;h1&gt;{{color_1}}&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div id="color-2"&gt;
    &lt;input type="text" ng-model="color_2" placeholder="Enter Color #2"&gt;
    &lt;h1&gt;{{color_2}}&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div id="color-3"&gt;
    &lt;input type="text" ng-model="color_3" placeholder="Enter Color #3"&gt;
    &lt;h1&gt;{{color_3}}&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>