I am trying to center a modal in relation to a specific div / Element as opposed to the screen itself.

So something like this:

export default Parent = () => {
  
  return (
    <Container id="abc">
         <Child data={data} />;
    </Container>
     );
  };
};

export default Child = () => {
  
  return (
    <Container>
         <Modal />;
    </Container>
     );
  };
};

export const ModalStyles = createGlobalStyle`
  .modal-modal {
    padding: 0;
    border-radius: 18px;
    max-width: 1500px;
    position: relative;
    min-width: 450px;
    margin: auto;
  }

  .modal-closeButton {
    align-items: center;
    justify-content: center;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
  }

  .modal-closeIcon {
    width: 60%;
    height: 60%;
  }
`;

Heres a picture to better describe what I am try to accomplish. The green is what I am trying to achieve when opening the modal, the red is what currently functionality is. Where is centers itself vertically and horizontally according to the screen.

CodePudding user response：

Add position: absolute; to the modal and position: relative; to the parent element. Then center the modal vertically and horizontally by setting justify-content: center; and align-items: center;.

CodePudding user response：

In the parent container, you'll need to add a position: relative style. In the modal container, you'll want to add a position: absolute style and then use a few additional styles to center it. Here is an example:

Parent:

export default Parent = () => {
  
  return (
    <Container id="abc">
         <Child data={data} />;
    </Container>
     );
  };
};

#abc {
  position: relative;
  // Remember to explicitly set your desired height and width, ex:
  // height: 75%;
  // width: 75%;
}

Child modal:

export default Child = () => {
  
  return (
    <Container id="modalcontainer">
         <Modal id="modal" />;
    </Container>
     );
  };
};

#modalcontainer {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

#modal {
  // However you'd like to style the modal inside the container wrapper
}