如何居中垂直头内？

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股利。

另一种解决方案：

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