Vertically central entrance inside a div

Question

I want the input fields to be vertically centered inside each div. color-1 color-2 color-3
Using vertical-align: middle in each div or input does not work.

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

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <div id="color-1"> <input type="text" ng-model="color_1" placeholder="Enter Color #1"> <h1>{{color_1}}</h1> </div> <div id="color-2"> <input type="text" ng-model="color_2" placeholder="Enter Color #2"> <h1>{{color_2}}</h1> </div> <div id="color-3"> <input type="text" ng-model="color_3" placeholder="Enter Color #3"> <h1>{{color_3}}</h1> </div> 

Answer 1

You can do this in two ways using display:flex or using display:table,display:table-row and display:table-cell , which you need to wrap in another div.

Using display: flex is better in which you don't need to wrap the template in another div

Add a color class for all color divs

Color class style

 .color{ height:33%; display: flex; justify-content: center; align-items:center; } 

For more information refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

I made a demo

  #color-1 { height: 33%; background: {{yourName}}; vertical-align: top; background: red; display: flex; justify-content: center; flex-direction: column; } 

and make divs

ALIGN = "center"