Placing the box in the center of the screen-CodePudding

i want to place the item in the middle of the screen using material ui. I am doing it like this but its placing it in center on the top. I want it in the middle of the screen.

import * as React from 'react';
import Box, { BoxProps } from '@mui/material/Box';

function Item(props: BoxProps) {
  const { sx, ...other } = props;
  return (
    <Box
      sx={{
        p: 1,
        m: 1,
        bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'),
        color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
        border: '1px solid',
        borderColor: (theme) =>
          theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300',
        borderRadius: 2,
        fontSize: '0.875rem',
        fontWeight: '700',
        ...sx,
      }}
      {...other}
    />
  );
}

export default function JustifyContent() {
  return (
    <div style={{ width: '100%', height:'100%'}}>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'center',
          textAlign:'center',
          p: 1,
          m: 1,
          bgcolor: 'background.paper',
          borderRadius: 1,
        }}
      >
        <Item>Item 1</Item>
     
      </Box>
     
    </div>
  );
}

what I am doing wrong?

CodePudding user response：

your justify content wrapper should be the size of the viewport. At the moment it has no height because its parent has no height.

change it to:

    <div style={{ width: '100vw', height:'100vh'}}>

and it should be centred in the middle of the screen.

CodePudding user response：

Add a minHeight of 100vh to always show in the middle of the screen regardless of the screen height.

 <Box
        sx={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          minHeight: "100vh",
          p: 1,
          m: 1,
          bgcolor: "background.paper",
          borderRadius: 1
        }}
      >
        <Item>Item 1</Item>
      </Box>

CodePudding user response：

Try this.

<div style={{ 
     width: '100%', 
     height:'100vh', 
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center'
     }}>

      <Box
        sx={{
          display: 'flex',
          justifyContent: 'center',
          textAlign:'center',
          p: 1,
          m: 1,
          bgcolor: 'background.paper',
          borderRadius: 1,
        }}
      >
        <Item>Item 1</Item>
     
      </Box>
     
    </div>

Whichever element you want to be in the middle, the wrapper/immediate parent of that needs to be styled properly in order to bring it in middle.

Steps to debug:

Inspect the whole page and check the box model for the target element.
Go to its wrapper/immediate parent and apply temporary properties over there.

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

NOTE: MAKE SURE TO GIVE PARENT ELEMENT THE HEIGHT

try adding these properties to the wrapper/immediate parent of the element you want to center.

Attaching random example to make you understand better, try running the code snippet

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100vh;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.child {
  height: 100px;
  width: 100px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div >
      <div >Item 1</div>
    </div>
  </body>
</html>

As you can see, if I want the 'Item 1' text to be in the center, I went to div with child class and insert those properties and the 'Item 1' text goes to the center.

Similarly to make the child div center, I went to div with the parent class and apply those properties to make the child div element centered.

Take reference and apply it, when you apply it on your own and debug it, you will never get this doubt in the future.