Кнопка вертикально центров содержания, но ДИВ не

Question

Следующие вертикально центрирует внутренний DIV

HTML

<button class="outer"> 
    <div class="inner"> 
     Hello<br>World 
    </div> 
</button> 

CSS

.outer { 
    position: absolute; 
    top: 25%; 
    left: 25%; 
    bottom: 25%; 
    right: 25%; 
    padding: 0; 
    background: none; 
    border: none; 
    outline: dashed 1px black; 
    font-family: sans-serif; 
    font-size: 16px; 
    text-align: center; 
} 

.inner { 
    background: #ccc; 
} 

JSFiddle

Но если я использую div вместо button для внешнего элемента,

По семантическим причинам, я хочу div не button.

Какие стили CSS необходимо добавить к классу .outer для создания такого же стиля вертикального выравнивания, что и у кнопки?

Мне нужно это для работы в Chrome и FF.

Answer 1

Это то, что вам нужно: Ссылка: http://jsfiddle.net/WP8um/2/

ИЛИ Если вы не хотите наценку на внешнем DIV вы можете использовать сверху, слева, снизу, справа свойства. http://jsfiddle.net/WP8um/3/

CSS

.outer { 
display: inline; 
margin:25%; 
background: none; 
outline: dashed 1px black; 
border: none; 
padding: 0; 
width: 200px; 
height:200px; 
} 


.inner { 
background: #ccc; 
text-align:center; 
margin: 50% 0; 
}