title: Horizontally centering tabs in Material-UI AppBar with ReactJS
body: <p>I'm building a React App with Material-UI and can't figure out how to center the 3 tabs within the blue AppBar. Currently, they are all left-aligned, as such:</p>
  
  <p><a href="https://i.imgur.com/MjQIuBl.png" rel="nofollow noreferrer">https://i.imgur.com/MjQIuBl.png</a> (can't embed images yet, my apologies)</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div&gt;
    {/* Tabs */}
    &lt;AppBar position="static" color="primary" style={{ position: 'fixed' }}&gt;
      &lt;Tabs
        fullWidth={true}
        value={this.state.value}
        onChange={this.handleChange}
        indicatorColor="secondary"
      &gt;
        &lt;Tab label="Passenger" icon={Icons.seatIcon} component={Link} to="/passenger" /&gt;
        &lt;Tab label="Driver" icon={Icons.driverIcon} component={Link} to="/driver" /&gt;
        &lt;Tab label="Settings" icon={Icons.settingsIcon} component={Link} to="/settings" /&gt;
      &lt;/Tabs&gt;
    &lt;/AppBar&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've experimented with a lot of different CSS properties from similar questions but haven't gotten close. Thanks for your help!</p>