items not vertically center aligned when it's height in flaoting number

[akshata456]

i'm using flex classes.when design like ,

it not setting the child div center align why ? if we change hight value to round number then it working properly.

[alex-krasikau]

Hey @akshata456!

To center a child inside a div using flex, use flex items-center justify-center.

Check the complete example here: Tailwind Play - Center Div.

[akshata456]

<div className="flex items-center w-[30px] h-[30px] bg-black justify-center"> <div className="block w-5 h-[20.5px] bg-red-900"></div> </div> tried this one but not working see top/bottom space difference

[alex-krasikau]

I tried your example in Tailwind Play, and it worked well for me: Tailwind Play Example.

Could you share the reproduction?

[akshata456]

I testing on mac with brave browser .lmk if you're checking on same device

[alex-krasikau]

Mac, Chrome. Here's a screenshot.

The only thing that comes to mind is that the browser incorrectly displays the 20.5px height. However, Brave is a Chromium-based browser and shouldn't have any problems with rendering subpixel elements.

[akshata456]

It's working in tailwind play , but here screenshot of demo on browser now child height is set 26.5 , it showing clear difference between top and bottom padding.

[alex-krasikau]

Could you provide more context? It would be helpful if you could create a reproduction in Tailwind Play.

[akshata456]

@alex-krasikau https://play.tailwindcss.com/frxgpmNInb check here

[alex-krasikau]

This issue is caused by using 0.5 px. If you stick to whole values, you won't encounter problems. Browsers generally support sub-pixel values, but they can be unreliable and occasionally lead to visual glitches.