将元素垂直居中 HTML答案

【问题标题】：Center an element vertically HTML将元素垂直居中 HTML
【发布时间】：2015-11-04 08:57:57
【问题描述】：

我试图在我的导航元素中垂直居中一个标题元素，我试图使用这个 CSS 计算 <h1> 的高度：

.navbar {
    display: table;
    width:90%;
    height: 3em;
    background-color: #7f8c8d;
    border-radius: 10px;
    .nav-title {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .nav-dropdown {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
}

它起作用了，我不明白如何。我还想知道是否有更好的方法将元素垂直居中。 TL;DR：这是如何工作的？还有什么其他方法可以完成这段代码所完成的工作。

【问题讨论】：

标签： css alignment vertical-alignment

【解决方案1】：

这是因为您将显示设置为table 和table-cell。表格单元格本身允许垂直居中。

如果不使用表格，您仍然有很多其他选择（尽管它们似乎都不那么简单）。

CSS-Tricks 有一个handy writeup of various centering methods。

【讨论】：

【解决方案2】：

将其视为表格，您可以创建 .nav-title 的表格单元格。您可以垂直对齐它们，这就是它的工作原理。

有没有简单的方法可以垂直居中？少数，但在很多情况下，其中一些不起作用。

这是一个：

    .element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

【讨论】：