Material Ui (reactjs) - 在 appBar 中居中一个 logo 图片

Question

我正在为我的反应项目 (material-ui.com) 使用材料 ui 库，并希望在 appbar 组件的中心添加我的徽标。

我尝试使用以下代码：

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

样式是：

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

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

我正在寻找如何将此徽标居中放置在所有浏览器之间相对一致的栏中间。

Answer 1

I have created running example can be found on link

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

Styling:

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

Please try to provide example on sandbox so that it would be easy for the person to help you out.