Center elements inside Tailwind Grid - css

Question

my problem is center elements with Tailwind Grid.
GroupTooltipIcon1/GroupTooltipIcon2 are component that contain an svg.
I have to be able to center the svg component within this grid tailwind, can you help me?
<div className="mt-[75px] grid grid-cols-2 gap-2 justify-items-center">
<div>
<div className="iconInsideTooltip">
<GroupTooltipIcon1 width="48px" height="48px" />
</div>
<TextSection
p5={
<>
<div>
Testo 1
</div>
</>
}
/>
</div>
</div>
const GroupTooltipIcon1 = ({
width = "48",
height = "48",
classes = "stroke-white",
}) => {
return (
<svg
className={classes}
style={{ width, height }}
viewBox={`0 0 48 48`}
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_206_1350)">
<path d="M31.6027 22.5623L34.1509 20.0644C38.9389 22.0715 42.8398 19.6492 42.8398 19.6492C48.6345 14.1502 46.9798 6.58116 46.9798 6.58116L40.1784 13.3197C40.1784 13.3197 37.9889 13.3197 36.2775 11.8977C34.8555 10.1801 34.8555 7.99681 34.8555 7.99681L41.6003 1.20169C41.6003 1.20169 34.0313 -0.453049 28.5323 5.34168C28.5323 5.34168 26.11 9.24259 28.117 14.0306L23.373 18.869"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"/>
</g>
<defs>
<clipPath id="clip0_206_1350">
<rect width="48" height="48" fill="white"/>
</clipPath>
</defs>
</svg>
);
};
export default React.memo(GroupTooltipIcon1);
I have to be able to center the svg component within this grid tailwind, can you help me?
Thank you for help

Answer 1

I found a solution by doing it this way. I hope it will be useful to someone
<div className="mt-[75px] grid grid-cols-2 gap-2 items-start">
<div>
<div className="iconInsideTooltip flex justify-center">
<GroupTooltipIcon1 width="48px" height="48px" />
</div>
<TextSection
customClasses={{ "text-center p-5": "p5" }}
p5={
<>
<div>
Testo 1
</div>
</>
}
/>
</div>
</div>