 <p>You can use <code>position: absolute</code> and <code>transform: translate()</code></p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>nav { position: relative; background: #2196F3; height: 50px; } .mdl-layout-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt; &lt;span class="mdl-layout-title navbar"&gt;Title&lt;/span&gt; &lt;/nav&gt;</code></pre> </div> </div> </p>