# EuiToolbarCenterComponent

**Type:** component

<p>Center-aligned container component for toolbar content, positioning elements in the middle of the toolbar.
Provides a dedicated region for center-aligned content such as application name, search bar, or navigation tabs.
Content is projected via ng-content allowing flexible composition of centered toolbar elements.
Automatically applies flexbox centering within the toolbar layout for consistent positioning.
Typically used within eui-toolbar to organize content in the center region between left and right toolbar items.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-app&gt;
  &lt;eui-app-toolbar&gt;
    &lt;eui-toolbar&gt;
      &lt;eui-toolbar-mega-menu [items]=&quot;menuItems&quot;&gt;&lt;/eui-toolbar-mega-menu&gt;
      &lt;eui-toolbar-center&gt;
        &lt;eui-toolbar-app appName=&quot;MyWorkplace&quot;&gt;&lt;/eui-toolbar-app&gt;
      &lt;/eui-toolbar-center&gt;
      &lt;eui-toolbar-items euiPositionRight&gt;
        &lt;button euiButton&gt;Action&lt;/button&gt;
      &lt;/eui-toolbar-items&gt;
    &lt;/eui-toolbar&gt;
  &lt;/eui-app-toolbar&gt;
&lt;/eui-app&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Center positioning provides visual balance</li>
<li>Content should follow proper semantic structure</li>
<li>Interactive elements must be keyboard accessible</li>
<li>Maintains consistent toolbar layout</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be used within eui-toolbar for proper layout</li>
<li>Positioned in center of toolbar between left and right content</li>
<li>Content projected via ng-content</li>
<li>Flexbox centering applied automatically</li>
<li>Common content: app name, search bar, navigation tabs</li>
<li>Works alongside toolbar-items and toolbar-mega-menu</li>
<li>Provides visual balance in toolbar layout</li>
<li>Responsive behavior inherits from toolbar</li>
</ul>


**Selector:** `eui-toolbar-center`

**Standalone:** false
