Css 材质Ui（reactjs）-将徽标图像居中放置在应用程序栏中

我正在为我的react项目（material ui.com）使用一个material ui库，并希望在appbar组件的中心添加我的徽标

我尝试了以下代码：

 <AppBar position="sticky" >
           <Toolbar>
                  <img src={'../logo.svg'} className={classes.logo} alt="logo" />
            </Toolbar>
 </AppBar>

它“有点”管用。我的意思是，在Chrome和Firefox中，徽标的大小不同，在IE中，它与appbar重叠

---

P> >我想知道如何把这个标志放在中间，在所有浏览器之间都是相对一致的。

< P>我在

上找到了运行示例。

---

请尝试在沙箱上提供示例，以便该人员能够轻松地帮助您

我已经创建了运行示例，可以在

---

请尝试在沙箱上提供示例，以便该人员能够轻松地帮助您

尝试将

Grid

容器与

alignItems

、

justify

和

alignContent

一起使用

Grid

容器与

alignItems

、

justify

和

alignContent

logo: {
        margin: 'auto',
        textAlign: 'center',
        maxWidth: '50%',
        maxHeight: '70%',
    }

 <AppBar position="sticky" >
  <Toolbar>
    <div style={classes.logoHorizontallyCenter}>
      <img src={'../logo.svg'} className={classes.logo} alt="logo" />
    </div>
  </Toolbar>
 </AppBar>

    var classes = {
  logo: {
    margin: 'auto',
    textAlign: 'center',
    maxWidth: '50%',
    maxHeight: '70%',
  },
  logoHorizontallyCenter: {
    position: 'absolute', 
    left: '50%', 
    top: '50%',
    transform: 'translate(-50%, -50%)'
  }
};