以导航品牌标题/徽标为中心

Question

我正在练习和学习新的材料设计精简版css框架，我阅读并扫描了他们的网站，但我无法获得如何将导航标题集中在一起的解决方案。如果有人知道该怎么做，你能给我一个示例修复吗？ 到目前为止，这是我的代码。

HTML：

<!-- Title -->
 <span class="mdl-layout-title navbar">Title</span>

注意：我添加了一个.navbar类，以便我可以覆盖样式。

CSS：

.navbar {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}

徽标现在居中，但链接被推到右侧，可以读取一些链接。

截图：

Answer 1

您可以使用position: absolute和transform: translate()

nav {
  position: relative;
  background: #2196F3;
  height: 50px;
}
.mdl-layout-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<nav>
  <span class="mdl-layout-title navbar">Title</span>
</nav>

Answer 2

.navbar {
    margin-left:auto;
    margin-right:auto;
    display:block;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;

}