Question

我正在尝试将导航元素中的标题元素垂直居中，我尝试使用此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：这是如何工作的？有什么其他方法可以完成这段代码的实现。

Answer 1

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

在不使用表的情况下，您仍然有很多其他选项（尽管它们似乎都不那么简单）。

CSS-Tricks有handy writeup of various centering methods。

Answer 2

将其视为表格，您可以创建.nav标题的表格单元格。您可以垂直对齐它们，以及它的工作原理。

有垂直居中的简单方法吗？一些，但在很多场合，他们中的一些人不能工作。

这是一个：

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

将元素垂直居中HTML

2 个答案: