import styled from 'styled-components';

​

const Parent = styled.div`

  position: relative;

  width: 300px; /* Add your preferred width */

  height: 200px; /* Add your preferred height */

  background-color: lightgray; /* Optional background color for visualization */

`;

​

const Child = styled.div`

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 100px; /* Add your preferred width */

  height: 50px; /* Add your preferred height */

  background-color: blue; /* Optional background color for visualization */

`;

​

const MyComponent = () => {

  return (

    <Parent>

      <Child />

    </Parent>

  );

};

​

export default MyComponent;