Why is my image centered but not aligned? I'm confused..
<Box
sx={{
display: 'flex',
minHeight: '100vh',
alignItems: 'center',
flexGrow: 1,
}}>
<Container maxWidth="sm">
<img src="https://static.vecteezy.com/system/resources/previews/001/200/294/original/house-png.png"
width={200}
alt="img"
/>
<LinearProgress sx={{ mt: 4 }} />
</Container>
</Box> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
If you want to center-align the content, you must use the "justifyContent: 'center'" attribute. Also, there are some issues with the "Container" element, you can use .
Check if this is what you want to achieve
<Box sx={{ display: "flex", minHeight: "100vh", alignItems: "center", justifyContent: "center", flexGrow: 1 }} > <Box> <img src="https://static.vecteezy.com/system/resources/previews/001/200/294/original/house-png.png" width={200} alt="img" /> <LinearProgress sx={{ mt: 4 }} /> </Box> </Box>Demo on Codesandbox
You can wrap
imgwithBox<Box sx={{ display: 'flex', minHeight: '100vh', alignItems: "center", flexGrow: 1, }} > <Container maxWidth="sm"> <Box sx={{ display: 'flex', justifyContent: "center" }} > <img src="https://static.vecteezy.com/system/resources/previews/001/200/294/original/house-png.png" width={200} alt="img" /> </Box> <LinearProgress sx={{ mt: 4 }} /> </Container> </Box>View my demo here