Center text within a span element

Question

I can't get the text of a span element to be centered. I have the following code to try

   <div className="relative border-2">
    <div className="h-full">
      <Image
        alt="image_1"
        fill
        style={{ objectFit: "cover" }}
        src="..."
      ></Image>
    </div>
    <span className="absolute top-1 right-1 text-center bg-wabu-keppel text-black font-bold h-10 w-10 rounded-full">
      4
    </span>
  </div>

Answer 1

 <span className="absolute top-1 right-1 text-center bg-wabu-keppel text-black font-bold h-10 w-10 rounded-full grid place-items-center">
  4
</span>