中心垂直元素HTML

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%); 
}