Как изменить размер окна, но поместить текст внутри центра?

Question

В следующем HTML:

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

Я хочу, чтобы изменить размер окна, так написал следующее:

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

Однако в результате коробка выглядит немного большим, поэтому я попытался изменить его размер.

.title { 
height: 90%; 
} 

Однако, даже если я попытался написать вышеприведенный код, результирующая коробка не будет затронута настройками.

.title { 
height: 100px; 
} 

Это сработало. Тем не менее, текст внутри него больше не находится в центре, поэтому я попытался сделать это в центре.

.title h2 { 
vertical-align: middle; 
} 

Однако, это не сработает.

Так как я могу изменить размер окна, но все еще есть текст внутри него нетронутым?

Кроме того, почему первая настройка высоты не работает, но вторая делает?

Спасибо.

Answer 1

Try применения: (working jsFiddle)

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

vertical-align не самый лучший подход в этом случае ..

UPDATE:

Используйте this jsFiddle вместо этого, он использует vertical-align как вы хотели и вам не нужно применять line-height от h2 .. секрет делает родителяи ребенок display:table-cell:

.title { 
    display: table; /* Here's the trick */ 
    border-radius: 12px; 
    border: 1px solid; 
    height: 100px; 
    width:100%; 
} 

.title h2 { 
    display:table-cell; /* Here's the trick */ 
    height:100%; 
    vertical-align:middle; 
} 

Answer 2

Проверить это jsfiddle. Для этого вам может понадобиться line-height.

h2{line-height: 50px;}