# EuiToolbarCenterComponent

**Type:** component



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.

```html
<eui-app>
  <eui-app-toolbar>
    <eui-toolbar>
      <eui-toolbar-mega-menu [items]="menuItems"></eui-toolbar-mega-menu>
      <eui-toolbar-center>
        <eui-toolbar-app appName="MyWorkplace"></eui-toolbar-app>
      </eui-toolbar-center>
      <eui-toolbar-items euiPositionRight>
        <button euiButton>Action</button>
      </eui-toolbar-items>
    </eui-toolbar>
  </eui-app-toolbar>
</eui-app>
```

### Accessibility
- Center positioning provides visual balance
- Content should follow proper semantic structure
- Interactive elements must be keyboard accessible
- Maintains consistent toolbar layout

### Notes
- Must be used within eui-toolbar for proper layout
- Positioned in center of toolbar between left and right content
- Content projected via ng-content
- Flexbox centering applied automatically
- Common content: app name, search bar, navigation tabs
- Works alongside toolbar-items and toolbar-mega-menu
- Provides visual balance in toolbar layout
- Responsive behavior inherits from toolbar


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