如何居中垂直頭內？

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