⚡ Quick Fix (TL;DR)

The Culprit: Vertical centering isn't straightforward with normal block layout – content just sits at the top of its container by default.

The Fix: Turn the container into a flex container and center its content along the vertical axis. Depends on the container having a defined height; one that only sizes to fit its own content will show no visible change.

.my-element {
  display: flex;
  align-items: center;
}