html - 如何在标题内垂直居中？

Question

我正在创建响应式 header 。我有两列，并希望右列中的 button 垂直居中。

我知道我可以使用 top: 50%; 居中元素margin-top: -xy px，我的 button 虽然有一个固定的 height: 40px.

为了使用这个方法，我将我的 button 包裹在一个 div {position: relative} 中。这是行不通的，因为 div 不会拉伸(stretch)自己的高度。

我如何用 css 解决这个问题？首先我想到了Flexbox , 但它有相当多的 lack of browser compatibility .

JSFIDDLE DEMO

Answer 1

您可以大大简化您的代码 - 删除 float (使用 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;
}