How to align center mui avatar in react js?

Hi Friends πŸ‘‹,

Welcome To aGuideHub!

To align center mui avatar in React js, You have to use display flex with justify-content center. It will align mui avatar in the center.

Today, I am going to show you, how to change the postion of mui avatar in react js.


Install the following packages to change postion of mui avatar in react js.


npm install @mui/material @emotion/react @emotion/styled


yarn add @mui/material @emotion/react @emotion/styled

MUI material align center mui avatar example.

The below code is an example of changing postion of mui avatar using this code justify-content.


import * as React from "react";
import Avatar from "@mui/material/Avatar";
import "./styles.css";

function stringAvatar(name, color) {
  return {
    sx: {
      bgcolor: color
    children: `${name[0]}`

export default function BackgroundLetterAvatars() {
  return (
    <div className="avatar-container">
      <Avatar {...stringAvatar("Guide Hub", "#673ABE")} />


.avatar-container {
  display: flex;
  width: 200px;
  border: 2px solid;
  justify-content: center;
  padding: 10px;
  border-radius: 10px;

In the above code example, I have used the @mui/material component and align center of mui avatar.

Here, we are provided code sandbox links for the above program align center mui avatar. Then you can use whenever you want and do the changes as per your requirements.

Let’s check the output.

Try it Yourself

All the best πŸ‘

Premium Content

You can get all the below premium content directly in your mail when you subscribe us


Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts