Rulers / Guides to confirm alignment?

Hi. Please feel free to delete this if it’s redundant, but I was wondering about the value of having Photoshop like rulers and draggable guides that snap to edges and centres so that we can check alignment?

The reason I ask is I’m having trouble with a flexbox ‘allegedly’ aligning things by centre vertically, but they are off and or at least they don’t look right and need some magic number massaging to be more appealing.

Having photoshop like draggable rules and snapping guides would really help ensure that alignments are correct, even when the code says it should be but you can see it isn’t.

Unless there is something in Safari / Chrome’s Dev tools that does this - I’m a newbie so forgive my ignorance.