Центрирование названия/логотипа торговой марки

Question

Я занимаюсь изучением нового дизайна материалов lite 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; 

}