html - How to resize the box but still put text inside it at center? -

in following html:

<div class='title'><h2>title</h2></div> 

i want resize box, wrote following:

.title { display: block; border-radius: 12px; border: 1px solid; } 

however, resultant box looks bit big, hence tried resize it.

.title { height: 90%; } 

however, if tried write above code, resultant box isn't affected settings.

.title { height: 100px; } 

this worked. however, text inside no more on center, tried make @ center.

.title h2 { vertical-align: middle; } 

however, doesn't work.

so how can resize box still have text inside intact?

also, why first height setting doesn't work second does?

thanks.

try applying: (working jsfiddle)

.title h2 {     margin:0px;     line-height:100px; /* change fit needs */ } 

vertical-align not best approach in case..

update:

use this jsfiddle instead, uses vertical-align wanted , don't need apply line-height of h2.. secret making parent display:table; , child display:table-cell:

.title {     display: table; /* here's trick */     border-radius: 12px;     border: 1px solid;     height: 100px;     width:100%; }  .title h2 {     display:table-cell; /* here's trick */     height:100%;     vertical-align:middle; }