html - 与表格单元格垂直对齐不起作用

Question

我试图将我的 header 元素置于其父元素的中心，但由于某种原因，display:table-cell 方法似乎不起作用。我正在使用 Basscss作为 CSS 框架，不确定这是否与它有关...

body, html {
  height: 100%;
}

.hero {
  display: table;
  width: 100%;
  height: 90%;

  header {
    display: table-cell;
    vertical-align: middle;
  }
}

我设置了一个 CodePen over here .出于某种原因，header 不会垂直居中。

感谢任何帮助。提前致谢!

Answer 1

那是因为你的<header>需要他的直接父元素带有 display: table .

在你的 CodePen 中，.clearfix和 .container在 <header> 之上.还有 .sm-col有一个 float:left;属性

查看我编辑的 CodePen