Absolute element set on the middle

import React from 'react';

const ParentComponent = () => {
  const parentStyle = {
    position: 'relative',
    width: '300px', // Set the width of the parent div
    height: '200px', // Set the height of the parent div
    border: '1px solid #ccc', // Optional: Just for visualization
  };

  const childStyle = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
  };

  return (
    <div style={parentStyle}>
      <div style={childStyle}>
        {/* Your content goes here */}
        <p>This is a centered absolute component</p>
      </div>
    </div>
  );
};

export default ParentComponent;