Как центрировать вертикальный внутренний заголовок?

Question

Я создаю отзывчивый заголовок. Я получил две колонки и хочу, чтобы button в правой колонке был вертикально по центру.

Я знаю, что могу центрировать элементы с помощью top: 50%; margin-top: -xy px, и мой button хотя получил фиксированный height: 40px.

Чтобы использовать этот метод, который я обмотал button внутри div {position: relative}. Это не работает, так как div не растягивает свою высоту.

Как я могу решить это с помощью css? Сначала я подумал о Flexbox, но он имеет довольно lack of browser compatibility.

JSFIDDLE DEMO

Answer 1

Вы можете значительно упростить код - удалить поплавки (используйте display: inline-block вместо этого), удалить .relative DIV и т.д.

Working Fiddle

html, body { 
    margin: 0; 
    padding: 0; 
    font-size: 16px; 
} 
header { 
    background: red; 
    color: #fff; 
    padding: 0.5em; 
} 
header h1 { 
    font-size: 2em; 
    margin: 0 0 0.2em; 
} 
header p { 
    margin: 0; 
} 
header button { 
    height: 40px; 
    width: 70px; 
} 
.column-left { 
    display:inline-block; 
    width: 70%; 
    vertical-align: middle; 
} 
.column-right { 
    width: 29%; 
    text-align: right; 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%; 
} 
/* responsive */ 
@media (min-width: 200px) { 
    header { 
    padding: 1em; 
    } 
} 
@media (min-width: 300px) { 
    header { 
    padding: 1.5em; 
    } 
} 
@media (min-width: 400px) { 
    header { 
    padding: 2em; 
    } 
} 
@media (min-width: 500px) { 
    header { 
    padding: 2.5em; 
    } 
} 
@media (min-width: 600px) { 
    header { 
    padding: 3em; 
    } 
} 
/* helpers */ 
.clearfix:after { 
    content: "."; 
    clear: both; 
    display: block; 
    visibility: hidden; 
    height: 0px; 
} 

Answer 2

Удалить этот Div с position: relative и добавить position: relative к вашему header тега. Вы даже можете удалить свой column-right div.

Другое решение:

header button { 
    top: 50%; 
    transform: translateY(-50%); // instead of negative margin-top (it is useful when your button has dynamic height, supports IE9+ with -ms- prefix) 
} 

JSFIDDLE