I'm using TailwindCSS to create a rounded button with a "+" in the middle. I'm using a flexbox to centre the plus character horizontally and vertically.
Vertical alignment starts going off if I increase the font size of the plus character too much. If I keep it small it works fine.
The current code is:
<div className="w-20 h-20 rounded-full bg-primary fixed bottom-10 right-10 cursor-pointer">
<div className="flex h-full justify-center items-center text-secondary text-5xl p-0">+</div>
</div>
and renders into this:
