Ingresso centrale verticale all'interno di un div

Question

Desidero avere i campi input centrati verticalmente all'interno di ciascun diviz. color-3
L'utilizzo di vertical-align: middle in ciascun div o input non funziona.

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

È possibile eseguire questa operazione in due modi utilizzando display:flex o utilizzando display:table,display:table-row and display:table-cell che è necessario avvolgere in un altro div.

Utilizzando visualizzazione: Flex è migliore, in cui non hai bisogno di avvolgere modello in un altro div

aggiungere la classe color per tutti i div colore

stile di classe 'colore'

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

Per ulteriori informazioni, fare riferimento a questo https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

avevo fatto demo

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

} 

e fare div

align = "center"