如何在 div 中居中“头像”材质 UI 组件？使用 ReactJS 和材质 UI

Question

我试图在我的项目中将头像材质 ui 组件居中，我尝试了很多东西，包括文本对齐、对齐内容、自动边距，但似乎没有任何效果。任何帮助将不胜感激

/////profile.js///////

 <div className="myProfile__outterContainer">
      <div className="myProfile__innerContainer">
        <div className="myProfile__header">
          <h2>My Profile</h2>
          <Avatar
            alt={user.displayName}
            src={user.photoURL}
            className={classes.large}
          />
          <h2>Welcome, {user.displayName}</h2>
        </div>
      </div>
    </div>

 
////// profile .css below
profile.css

    .myProfile__outterContainer {
  display: flex;
  justify-content: center;
  margin-top: 5vh;
}

.myProfile__innerContainer {
  position: relative;
  width: 800px;
  padding: 20px;
  max-width: 85vw;
  height: 75vh;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  box-shadow: 0px 18px 53px 0px rgba(0, 0, 0, 0.3);
}
.myProfile__header {
  text-align: center;
  justify-content: center;
  
}

Answer 1

将<h2> 标签和头像垂直居中：

.myProfile__header {
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
}