在div内部垂直居中放置标签

Question

我正在尝试做一些我认为很容易的事情，但显然让它听上去很耳熟。这是my fiddle

我有一个按钮和一个标签显示。我想将标签居中于div的中心，因此水平和垂直居中。

我可以水平居中，但不能垂直居中。因此，我尝试了一些操作，但似乎没有任何东西可以使标签垂直居中，即使我在下面使用了垂直对齐方式也是如此。不确定为什么吗？

.headerLbl {
   text-align: center;
   font-weight: bold;
   color: white;
   font-size: 14pt; 
   display: block;
   vertical-align: central;
}

Answer 1

您需要在代码中添加以下样式：

.menu {  
  background-color: #9FACEC;    /* Medium blue */
  position: fixed;
  width: 100%;
  margin: 0;
  z-index: 1;
  display:flex;
  justify-content: center;
}

.headerLbl {
   align-self: center;
   width: 90%;
   text-align: center;
}